Ergebnis 1 bis 2 von 2

Thema: Style.css Problem (Anfänger)

  1. #1
    Lion1605
    Gast

    Standard Style.css Problem (Anfänger)

    Hallo alle zusammen,


    ich habe ein kleines Problem bzw. ein großes für mich
    ich soll für einen guten freund eine kleine Homepage erstellen nun fehlen mir leider noch die kenntisse. Nun mein Problem ich komme nicht ganz klar bzw. ich verstehe nicht wie und was ich verändern muss wenn ich sachen anders als wie in der vorlage vorgsehen positionieren möche. (Weiter unten genauer geschildert)
    Er Gab mir volgende "vorlagen" :
    images -ordner
    style.css
    index.html

    Hier noch mal die beiden vorgefertigten codes
    style.css code
    Code:
    * {
            margin: 0px;
            padding: 0px;
    }
    body {
            padding-top: 0px;
            background-color: #01111d;
            color: #FFF;
            font-family: verdana, arial, sans-serif;
    
            text-align: left;
            letter-spacing: 1px;
    }
    a {color: #FFF;font-size: 14px;}
    a:hover {color: #01a9c0;}
    .more{float: left;}
    .clear{clear:both;}
    p{        margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
    #container {
            margin: 0px auto;
            width:873px;
    }
    #menu {
            background-image:url(images/menu.gif);
            width:862px;
            height:90px;
            position:relative;
    }
    #menu li{
            position:absolute;
            top:50px;
    
            list-style-type: none;
    }
    #m01 {left:160px;}
    #m02 {left:305px;}
    #m03 {left:450px;}
    #m04 {left:590px;}
    #m05 {left:730px;}
    #menu a{
            font-family: verdana, arial, sans-serif;
            font-size: 12px;
            font-weight:bolder;
            color:#FFFFFF;
            text-decoration:none;
            text-transform: uppercase;
    }
    #menu a:hover {color: #01a9c0;}
    #header {
            background-image:url(images/header.gif);
            background-repeat:repeat-y;
            width:873px;
    }
    #logo {
            width:240px;
            height:46px;
            margin: 0px 0px 0px 80px;
            float:left;
            display:inline;
    }
    #paul {
            background-image:url(images/paul.jpg);
            width:498px;
            height:405px;
            float:right;
            margin-right:40px;
            display:inline;
    }
    #platzhalter {
            background-image:url(images/platzhalter_bild.jpg);
            width:498px;
            height:405px;
            float:right;
            margin-right:40px;
            display:inline;
    }
    #welcome {
            width:210px;
            margin: 25px 0px 0px 100px;
            float:left;
            display:inline;
    }
    #aboutme {
            width:210px;
            margin: 25px 0px 0px 100px;
            float:left;
            display:inline;
    }
    #kontakt {
            width:210px;
            margin: 25px 0px 0px 100px;
            float:left;
            display:inline;
    }
    #welcome h2{
            margin: 0px 0px 20px 0px;
    }
    #welcome p{
            width:200px;
    }
    #welcome img{
            border: solid 3px #FFFFFF;
    }
    #middle {
            background-image:url(images/middle.gif);
            width:873px;
            height:21px;
    }
    #middle2 {
            background-image:url(images/middle2.gif);
            width:873px;
            height:22px;
    }
    #content {
            background-image:url(images/content.gif);
            width:873px;
    }
    #left {
            float:left;
            width:435px;
            margin: 0px 0px 0px 85px;
            display:inline;
    }
    #right {
            float:right;
            width:258px;
            height:auto;
            margin: 0px 62px 20px 0px;
            display:inline;
    }
    #right a img{
            margin: 8px 8px 8px 0px;
            border: none 0px #FFFFFF;
    }
    #footer {
            background-image:url(images/footer.gif);
            background-repeat:no-repeat;
            width:873px;
    }
    #footer p{
            height:58px;
            width:873px;
            text-align:center;
            margin: 0px 0px 0px 0px;
            padding: 30px 0px 0px 0px;
            font-size:11px;
    }
    #footer a{
            font-size:11px;
    }

    index.html code
    HTML-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=iso-8859-1" />
    	<title>Night club template</title>
    	<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
    </head>
    
    <body>
    <div id="container">
    	<div id="menu">
    
    		<ul>
    			<li id="m01"><a href="http://www.freewebsitetemplates.com">Home</a></li>
    			<li id="m02"><a href="http://www.freewebsitetemplates.com">Photos</a></li>
    			<li id="m03"><a href="http://www.freewebsitetemplates.com">Parties</a></li>
    			<li id="m04"><a href="http://www.freewebsitetemplates.com">Booking</a></li>
    			<li id="m05"><a href="http://www.freewebsitetemplates.com">Contact</a></li>
    		</ul>
    	
    	</div>
    	<div id="header">
    		<div id="logo">
    			<a href="http://www.freewebsitetemplates.com"><img src="images/logo.gif" alt="logo" border="0" /></a>
    		</div>
    		<div id="dj"></div>
    		<div id="welcome">
    			<h2>Welcome</h2>
    			<img src="images/welcome.gif" alt="photo 1" />
    			<p>We add new <a href="http://www.freewebsitetemplates.com">free website templates</a> frequently.</p>
    			<p>You can remove any link to our websites from this template you're free to use the template without linking back to us.</p>
    			<a class="more" href="http://www.freewebsitetemplates.com">more</a>
    		</div>
    		<div class="clear"></div>
    	</div>
    	<div id="middle"></div>
    	<div id="middle2"></div>
    	<div id="content">
    		<div id="left">
    			<h2>News events</h2>
    			
    			<p>This is just a place holder so you can see how the site would look like.</p>
    			<p>The template is designed by <a href="http://www.freewebsitetemplates.com">free website templates</a> for you for free you can replace all the text by your own text.</p>
    			<p>Even more websites all about website templates on <a href="http://www.justwebtemplates.com">Just Web Templates</a>.</p>
    			<p>If you're looking for beautiful and professionally made templates you can find them at <a href="http://www.templatebeauty.com">Template Beauty</a>.</p>
    		</div>
    		<div id="right">
    			<h2>Photos</h2>
    			<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 1" /></a>
    			<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 2" /></a>
    			<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 3" /></a>
    			<a href="http://www.freewebsitetemplates.com"><img src="images/photo.jpg" alt="photo 4" /></a>
    			<br /><br />
    			<a class="more" href="http://www.freewebsitetemplates.com">more photos</a>
    		</div>
    		<div class="clear"></div>
    	</div>
    	
    	<div id="footer">
    		<p>Copyright © Website name all rights reserved. |  <a href="http://www.freewebsitetemplates.com/termsofuse">Terms of use</a><p>
    		
    	</div>
    
    </div>
    </body>
    </html>
    Die Vorlage sieht nun so aus
    http://imgbox.de/users/Berlin16/nightclubjpg.jpg



    Nach dem ich an den codes ein wenig gebatselt habe ist das entstanden:
    http://lion1605.de
    images (ordner)
    style.css code
    about me.html
    gallerie.html
    kontakt.html

    Vom Aufbau her stimmt es erstmal soweit.
    Nun mein Problem wie kann ich zum beispiel auf "About Me" das bild an erster stelle nehmen und den Text an zweiter stelle (Bild Links Text rechts daneben)? Sobald ich den DIV für das Bild rausnehme rutscht der text automatisch nach rechts. Füge ich das Bild wieder ein ist die schrift links und das bild wieder rechts. Denke das is nur ein kleiner teil der geändert werden muss aber mit css. kenne ich mich leider noch nicht wie gewollt aus.

    Hier noch mal meine veränderte css datei (roten teil ahbe ich hinzugefügt für die einzelnen html seiten und bilder):
    Code:
    * {
            margin: 0px;
            padding: 0px;
    }
    body {
            padding-top: 0px;
            background-color: #01111d;
            color: #FFF;
            font-family: verdana, arial, sans-serif;
    
            text-align: left;
            letter-spacing: 1px;
    }
    a {color: #FFF;font-size: 14px;}
    a:hover {color: #01a9c0;}
    .more{float: left;}
    .clear{clear:both;}
    p{        margin: 20px 0px 20px 0px;line-height: 16px;font-size: 14px;}
    #container {
            margin: 0px auto;
            width:873px;
    }
    #menu {
            background-image:url(images/menu.gif);
            width:862px;
            height:90px;
            position:relative;
    }
    #menu li{
            position:absolute;
            top:50px;
    
            list-style-type: none;
    }
    #m01 {left:160px;}
    #m02 {left:305px;}
    #m03 {left:450px;}
    #m04 {left:590px;}
    #m05 {left:730px;}
    #menu a{
            font-family: verdana, arial, sans-serif;
            font-size: 12px;
            font-weight:bolder;
            color:#FFFFFF;
            text-decoration:none;
            text-transform: uppercase;
    }
    #menu a:hover {color: #01a9c0;}
    #header {
            background-image:url(images/header.gif);
            background-repeat:repeat-y;
            width:873px;
    }
    #logo {
            width:240px;
            height:46px;
            margin: 0px 0px 0px 80px;
            float:left;
            display:inline;
    }
    #paul {
            background-image:url(images/paul.jpg);
            width:498px;
            height:405px;
            float:right;
            margin-right:40px;
            display:inline;
    }
    #platzhalter {
            background-image:url(images/platzhalter_bild.jpg);
            width:498px;
            height:405px;
            float:right;
            margin-right:40px;
            display:inline;
    }
    #welcome {
            width:210px;
            margin: 25px 0px 0px 100px;
            float:left;
            display:inline;
    }
    #aboutme {
            width:210px;
            margin: 25px 0px 0px 100px;
            float:left;
            display:inline;
    }
    #kontakt {
            width:210px;
            margin: 25px 0px 0px 100px;
            float:left;
            display:inline;
    }
    #welcome h2{
            margin: 0px 0px 20px 0px;
    }
    #welcome p{
            width:200px;
    }
    #welcome img{
            border: solid 3px #FFFFFF;
    }
    #middle {
            background-image:url(images/middle.gif);
            width:873px;
            height:21px;
    }
    #middle2 {
            background-image:url(images/middle2.gif);
            width:873px;
            height:22px;
    }
    #content {
            background-image:url(images/content.gif);
            width:873px;
    }
    #left {
            float:left;
            width:435px;
            margin: 0px 0px 0px 85px;
            display:inline;
    }
    #right {
            float:right;
            width:258px;
            height:auto;
            margin: 0px 62px 20px 0px;
            display:inline;
    }
    #right a img{
            margin: 8px 8px 8px 0px;
            border: none 0px #FFFFFF;
    }
    #footer {
            background-image:url(images/footer.gif);
            background-repeat:no-repeat;
            width:873px;
    }
    #footer p{
            height:58px;
            width:873px;
            text-align:center;
            margin: 0px 0px 0px 0px;
            padding: 30px 0px 0px 0px;
            font-size:11px;
    }
    #footer a{
            font-size:11px;



    Ich denke mal den Beiträg hätte man auch 3/4 kleiner schreiben können aber naja . Ich danke schonmal im vorraus für eure Hilfe.

    Für Rechtschreibfehler muss ich mich Entschuldigen sie liegt mir nicht so recht.



    P.S. ist erst mal nicht so wichtig aber wenn wir schonmal dabei sind hätt ich doch noch zwei kleine Fragen ...

    weis jemand oder kann mir bitte jemand eine kleine shoutbox programieren?
    nen einfaches Textfeld ohne Smilies und sowas wo user einfach ne nachricht hinterlassen können?


    Lieben Gruß und einen Schönen Abend noch.


    Editt
    Habe einen Punkt ganz vergessen undzwar wie kann ich die "Textcontainer" erweitern? in die Länge erweitern sie sich automatisch aber nicht in die breite ;(
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Lion1605 (16.04.2009 um 23:57 Uhr)

  2. #2
    König(in) Avatar von chris90night
    Registriert seit
    09.09.2006
    Ort
    <?php echo $_SERVER['PHP_SELF']; ?>
    Beiträge
    1.096
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Style.css Problem (Anfänger)

    Zitat Zitat von Lion1605 Beitrag anzeigen
    Vom Aufbau her stimmt es erstmal soweit.
    Nun mein Problem wie kann ich zum beispiel auf "About Me" das bild an erster stelle nehmen und den Text an zweiter stelle (Bild Links Text rechts daneben)? Sobald ich den DIV für das Bild rausnehme rutscht der text automatisch nach rechts. Füge ich das Bild wieder ein ist die schrift links und das bild wieder rechts. Denke das is nur ein kleiner teil der geändert werden muss aber mit css. kenne ich mich leider noch nicht wie gewollt aus.
    Hi,

    ohne in den Code zu schauen und mich näher damit zu befassen, würde ich einfach sagen, dass die Box ein "float:right;" besitzt. Also einfach der Box mit dem Text ein "float:left;" verpassen, danach wieder clearen und schon müsste es passen.
    Ansonsten schau dir einfach mal CSS an... Es gibt doch soooo viele gute Tutorials im Internet - lernen musst du das schon selber


    Zitat Zitat von Lion1605 Beitrag anzeigen
    Ich denke mal den Beiträg hätte man auch 3/4 kleiner schreiben können aber naja .
    Jo... warum machst du es dann nicht?

    Zitat Zitat von Lion1605 Beitrag anzeigen
    P.S. ist erst mal nicht so wichtig aber wenn wir schonmal dabei sind hätt ich doch noch zwei kleine Fragen ...
    Eigentlich ja nur eine...

    Such mal im Internet nach Shoutboxen. Entweder du findest Codeschnipsel oder auch was Fertiges.
    Merke: Wenn du so in einem Thread fragst, wird dir keiner mit "Ja" antworten.

    Zitat Zitat von Lion1605 Beitrag anzeigen
    Habe einen Punkt ganz vergessen undzwar wie kann ich die "Textcontainer" erweitern? in die Länge erweitern sie sich automatisch aber nicht in die breite
    In die Breite erweitern sie sich ebenfalls automatisch (sofern es sich um ein Blockelement handelt). Wenn das nicht so ist, liegts einfach daran, dass eine feste Breite angegeben wurde.

    MfG


    Denk immer daran: auch am anderen Ende der Leitung sitzt ein Mensch!

Ähnliche Themen

  1. CSS Stil Anfänger-Problem
    Von im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 16.12.2007, 23:22
  2. Anfänger Problem
    Von Martin279 im Forum Forum für alle anderen Programmiersprachen
    Antworten: 2
    Letzter Beitrag: 20.04.2007, 18:21
  3. [PHP-Anfänger] Problem mit Script
    Von STL im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 27.12.2006, 13:16
  4. css style problem
    Von mindestens haltbar bis im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 06.05.2006, 17:30
  5. style Problem
    Von im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 24.12.2005, 00:13

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •