Ein Div neben einem zentrierten Div mit fixer Breite?

DaFlo

Hi Leute,

ich beschäftigte mich seit heute mit CSS um mir eine eigene Webseite für mein Fotohobby zu basteln. Meine Frage ist eigentlich ganz einfach (denke ich) und ich denke ein Basisthema.

Hier ein Auszug aus meinem Code, was ich bisher bis jetzt erstellt habe.

Code

<body>
  <table align="center">
    <tr>        
      <td>            
        <div id="logo">                
          <img src="images/logo_2.png" width="150px" align="left" />            
        </div>
        <div id="navigation" align="right" >                
          <ul id="navigation">                    
            <li><a href="index.html">Home</a></li>                    
            <li><a href="ueber.html">&Uuml;ber mich</a></li>                   
            <li><a href="portfolio.html">Portfolio</a></li>                    
            <li><a href="kontakt.html">Kontakt</a></li>                
          </ul>            
        </div>            
        <div id="content_img">               
          <img src="portfolio/img1.jpg" oncontextmenu="return false;"/>            
        </div>
        <div id="copyright" style="float: left;">Copyright 2014 &copy; rawshoot</div>
        <div id="footer" align="right" style="float: right;">                
          <a href="impressum.html">Impressum</a>            
        </div>        
      </td>    
    </tr>
  </table>
</body>

Alles anzeigen

CSS

#logo {    
  width: 500px;    
  margin-top: 10px;
}




#navigation {    
  height: 40px;    
  width: 100%;    
  margin-top: 40px;    
  font-family: Arial;    
  font-size: 20px;    
  color: #FFF;
}




ul#navigation {    
  margin: 0px;   
  padding: 0px;    
  list-style-type: none;    
  vertical-align: bottom;
}




ul#navigation li {    
  padding: 10px;    
  /*'margin: 0px;    display: inline;*/
  /* floaten der Hauptlistenpunkte */    
  margin: 0;    
  float: left;    
  display: block;    
  padding-right: 15px;
}




#content_img {    
  margin-top: 30px;    
  height: 800px;    
  width: 1200px;
}

Alles anzeigen

Nun würde ich gerne links neben dem zentrierten content_img ein div mit einer fixen breite anzeigen. Kann mir dabei jemand helfen?

Viele Grüße
Flo

wolf

Also ... ich muss sagen, RESPEKT ... einer der wenigen der es von anfang an schafft seinen Code richtig hier rein zu posten
Arbeitest du mit einrückungnen o.ä.?

Ich räume deinen Code mal auf... hat Basii schon getan .. :0

Was mir garnicht gefällt das du mit tabellen arbeitest ... bitte behebe das zuerst... hast du dich schonmal mit html5 beschäftigt?
EDIT 1:
Was garnicht geht, ist HTML und design zu vermischen!
EDIT2:
Rechtsklick zu verbieten ist ein UNDING und bringt eh nichts...

DaFlo

Hi danke erstmal für dein Antwort, selten liest man eine "nette" und wirklich hilfreiche Antwort in einem Forum

Also das mit den Tabellen habe ich in einem Youtube Video gesehen, deshalb habe ich das mal so übernommen. Wie geht es denn besser?

Was meinst du denn mit Einrückungen?

Den Rechtsklick will ich verbieten weil es sich um eine Seite handelt auf der ich urheberrechtlich geschützte Bilder hochlade, deshalb wollte ich es "nicht ganz so einfach machen"

Ich schicke dir per PN mal nen Link der Seite, vielleicht kannst du dort mehr erkennen um mir zu helfen

Danke!!

Basi

Auch von mir ein Hallo, wir sind meistens ganz handzahm wenn man sich nicht wie der letzte Dorftrottel aufführt

Bitte vergiss die Tabellen schnell wieder wenn du von Anfang an richtig lernen möchtest. Deine Frage nach dem "Wie geht es denn besser?" klärt sich im HTML-Seminar (.de), speziell im Abteil CSS Box Modell. Ein richtiger Ansatz wäre es nun das Tutorial von Anfang an durchzuarbeiten, bis du die Themen HTML und CSS abgeschlossen hast.

Auf den ersten Blick scheint das viel komplizierter zu sein als einfach Tabellen zu nutzen, du wirst jedoch merken das Tabellen Dinge viel komplizierter machen als sie eigentlich sind. Desweiteren sind Tabellen nun mal zum anzeigen tabellarischer Daten da.

Zu deinen rechtlich geschützten Bildern kann ich dir sagen das ein Vermerk darauf sowohl dir als auch deinen Benutzern deutlich mehr hilft als das verbieten des Kontextmenüs (welches man im Browser deaktivieren kann). Das ist Spielkram mit dem man sich vor gut 6-7 Jahren beschäftigt hat und verbreitet nur unnötige Unruhe beim Benutzer weil das bekannte Menü nicht aufpoppt.
Wenn du nicht weißt wie du deine Bilder richtig schützen kannst, eröffne doch einfach ein entsprechendes Thema im Forum, wir helfen auch da gerne.

Ich hoffe ich konnte dir helfen abzuwägen welcher Weg für dich der richtige ist und wünsche dir viel Spaß in der Welt von HTML, CSS und Co.

PS.: Nicht wundern, deinen Code habe ich etwas aufgelockert

wolf

Also ich muss sagen... ein Händchen für Design hast du... zumindest das was man bisher sieht xD
Mein Html5 Beispiel... Standart Struktur zum anlehnen (Wenn sich etwas nicht erklärt ... dann frage einfach )

HTML

<html>
    <head>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <link rel="stylesheet" type="text/css" href="style.css">




        <title>Pagetitle</title>
    </head>
    <body>
        <!-- KOPFBEREICH -->
        <header>
            <!-- LOGO -->
            <img id="logo" src="">
            <!-- NAVIGATION -->
            <nav>
                <ul>
                    <li><a href="">Link</a></li>
                </ul>
            </nav>
        </header>
        <!-- HAUPTBEREICH -->
        <section>
            <h1>Überschrift</h1>
            <!-- EINTRAG -->
            <article>
                <h2>Beitrag 1</h2>
                <p>
                    Some Text
                </p>
            </article>
            <!-- EINTRAG -->
            <article>
                <h2>Beitrag 2</h2>
                <p>
                    Some Text
                </p>
            </article>
        </section>
        <!-- FUßBEREICH -->
        <footer>

        </footer>
    </body>
</html>

Alles anzeigen

Jetzt mitmachen!