[GastForen Web allgemein HTML und CSS / Stylesheets Boxen nebeneinander

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

Boxen nebeneinander

Pixelman
Beiträge gesamt: 2

14. Feb 2014, 20:36
Beitrag # 1 von 2
Bewertung:
(3802 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
 
Hallo,
ich möchte vier navi-Punkte nebeneinander haben. Habe nun einen Div-Container herum gebaut und diesen mit display: inline benannt. Aber ? Es funktioniert nicht! Why????

Danke




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>runde Ecken</title>
<style>
#navi{
display:inline;
width:600px;
height:160Px;
background:#CCCCCC;
}

#Quadrat{

border-radius:20px;
border:2px #eee solid;
width: 124px;;
height: 40px;
background:#fff;
font-size:12 px;
margin-bottom:25px;
text-align:center;


}

#Quadrat1{


border-radius:20px;
border:2px #eee solid;
width: 124px;;
height: 40px;
background:#fff;
font-size:12 px;
margin-bottom:25px;
text-align:center;


}

#Quadrat2{
border-radius:20px;
border:2px #eee solid;
width: 124px;
height: 40px;
background:#fff;
font-size:12 px;
margin-bottom:25px;
text-align:center;



}

#Quadrat3{

border-radius:20px;
border:2px #eee solid;
width: 124px;
height: 40px;
background:#fff;
font-size:12 px;
text-align:center;


}

</style>

</head>

<body>



<div id="navi">

<div id="Quadrat">
Startseite
</div>

<div id="Quadrat1">
Berufe
</div>

<div id="Quadrat2">
Weiterbildung
</div>

<div id="Quadrat3">
Service
</div>




</div>
</body>
</html>
X

Boxen nebeneinander

uteS
Beiträge gesamt: 603

15. Feb 2014, 19:37
Beitrag # 2 von 2
Beitrag ID: #523696
Bewertung:
(3750 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
Nicht #navi bekommt das Display:inline, sondern die #Quadrat(e).

Falls du keine besonderen Gründe hast für die 4 Quadrat-IDs, würde ich die 4 Menüpunkte einfacher als <p> machen:

Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>runde Ecken</title>
<style><!--
#navi {
width:600px;
height:160px;
background:#cccccc;
margin-right: auto;
margin-left: auto; }
#navi p {
display: inline-block;
border-radius:20px;
border:solid 2px #eee;
width: 124px;;
height: 40px;
background:#fff;
font-size:12 px;
margin-bottom:25px;
text-align:center;
margin-right: 9px;
margin-left: 9px;
}
--></style>
</head>




<body>
<div id="navi">
<p>Startseite</p>
<p>Berufe</p>
<p>Weiterbildung</p>
<p>Service</p>
</div>
</body>

</html>



als Antwort auf: [#523685]

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
18.06.2024

Online
Dienstag, 18. Juni 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow
Veranstaltungen
02.07.2024

Online
Dienstag, 02. Juli 2024, 10.00 - 10.30 Uhr

Webinar

In diesen beiden kostenlose Webinaren erfahren Sie, wie Sie mit Hilfe von Enfocus Griffin und dem Impressed Workflow Server Ihren LFP-Workflows optimieren können. 18.06.2024: So optimieren Sie Ihre Prozesse mit Enfocus Griffin 02.07.2024: So sparen Sie Zeit und Geld mit Impressed Workflow Server in der LFP-Edition Griffin: Griffin ist das leistungsstarke Kraftpaket für das automatische Nesting im Großformatdruck. Dank eines ausgeklügelten, KI-basierten Nesting-Algorithmus können Sie mit Griffin Vorlagen schnell und effizient vernutzen – und das klappt auch mit unregelmäßigen Formen perfekt. Das spart Ihnen unzählige Stunden, die Sie bisher mit dem manuellen Nesting und Ausschießen verbracht haben. Einige wichtige Funktionen ≡ Anlage von Beschnittzugaben ≡ Automatische Erzeugung der Schnittkontur ≡ Erstellung von Strichcodes, Textmarkierungen und Registrierungen IWS LFP Edition: Komplizierte, kleinteilige Aufträge; alles sehr speziell; seit Jahren bewährte Prozesse – da können wir nichts standardisieren und automatisieren! Das sagen viele Großformatdrucker – aber stimmt das wirklich, ist dem tatsächlich so? Mit dem IWS LFP Edition automatisieren Sie Ihre Produktion von der Übernahme der Daten aus dem ERP-System bis zur Erzeugung der verschachtelten Druckform und der Übergabe an den RIP. Phoenix Core ist eine hochentwickelte KI-Technologie für die Planung und das Nesting von Druckerzeugnissen. Anders als herkömmliche Ausschießlösungen arbeitet Phoenix nicht auf Basis von Vorlagen, sondern erzeugt entsprechend der Maschinen- und Produktionsanforderungen druckfertige Layouts „on-the-fly“.

kostenlos

Ja

Organisator: Impressed GmbH

Kontaktinformation: E-Mailschulungen AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=328

So optimieren Sie Ihren LFP-Workflow