blueprint sorgt für unordnung? oder mach ich was falsch

**digismo** · 26.07.2011 20:28

ich wollte mir für joomla ein eigenes template mit hilfe von blueprint machen, damit ich keine copyrights zu beachten habe bzw es von grund auf nach meinen bedürfnissen erstellen kann.

schon beim ersten test treten jetzt problem auf.

die spalten sind nicht gleich lang: 1 und 9 sind minimal länger als 2+3 sowie 4+5+6 und 7+8.
zwischen 4 und 5 ist kein abstand, dafür ist er zwischen 5 und 6 doppelt so gross wie zwischen 2 und 3 sowie 7 und 8.

hier das beispiel www.domain-nation.de

screenshot
http://www.domain-nation.de/blueprint1.png

quelltext

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html><head>

<title>background-color</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />

<!--[if IE]><link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /><![endif]-->



<style type="text/css">



body { background-color:#ffe;  font-family: Arial; font-size:100%; font-color:#FF0;}



#o-top-l { background-color:#51a; height:30px; padding:1px; margin:0 auto; overflow:auto; float:left;}

#o-top-m { background-color:#56D; height:30px; padding:1px; margin:0 auto; overflow:auto; float:left;}

#o-top-r { background-color:#556; height:30px; padding:1px; margin:0 auto; overflow:auto; float:right;}



#top { background-color:#567; height:100px; padding:1px; margin:0 auto; overflow:auto; float:left;}



#u-top-l { background-color:#50a; height:30px; padding:1px; margin:0 auto; overflow:auto; float:left;}

#u-top-m { background-color:#5aD; height:30px; padding:1px; margin:0 auto; overflow:auto; float:left;}

#u-top-r { background-color:#5bf; height:30px; padding:1px; margin:0 auto; overflow:auto; float:right;}



#footer { background-color:#32DDDD; height:30px; padding:1px; margin:0 auto; overflow:auto; float:left; }



</style>





</head>









<body>



<h1> </h1>



<div class="body">





  <div class="container">

       <div id="top" class="span-24 last">

                 11111      

       </div>

          

       <div id="o-top-l" class="span-16">

          222222

       </div>          

                   

        <div id="o-top-r" class="span-8 last">

       333333

        </div>

                    

         <div id="u-top-l" class="span-8">

       444444

          </div>      

          

              

          <div id="u-top-m" class="span-8">

         55555

          </div>   

          

                 

          <div id="u-top-r" class="span-8 last">

              66666         

          </div>   

          

          

          <div id="o-top-l" class="span-8">

          77777

          </div>  

          

                   

          <div id="o-top-r" class="span-16 last">

            888888

          </div>

                           

          

          <div id="footer" class="span-24 last">

       999999

          </div>

          

      </div>





</body>

**hero-master** · 27.07.2011 11:56

Hi

das Problem liegt an den Angaben im Inline-CSS. Durch das padding: 1px veränderst du die Breite des Objektes (CSS-Box-Modell) und somit verschiebt sich auch alles

Das margin: 0 auto macht dort auch keinen Sinn, da du das Objekt ja links floaten lässt.
Btw: Durch den alten Doctype haust du den IE in den Quirksmode und er zeigt das Boxmodell falsch an. Wenn du einen neuenren Doctype verwendest, dann ist wohl auch das meiste, was in der ie.css (der pfad dahin ist übrigens bei dir falsch) steht, obsolet.

**digismo** · 27.07.2011 13:25

ich verwende vorerst nur firefox... im ie werde ich erst gucken wenn FF richtig passt.
ich hatte das padding zu beginn verwendet, um die einzelnen zellen besser unterscheiden zu können.
das padding hab ich jetzt auf 0 gestellt. jetzt sind 1und 9 gleich lang sind wie 2+3 und 4+5+6 und 7+8.
vielen dank....
aber warum hab ich zwischen 4 und 5 keinen abstand dafür zwischen 5 und 6 den doppelten?

wenn ich das unter folgendermassen abändere: #u-top-l { background-color:#50a; height:30px; padding:0px; margin:10; float:left;}
setzte sieht es so aus, wie es aufschaun soll. aber warum.. da müsste doch von haus aus ein abstand sein... so wie bei den anderen übergängen von einen spalte zu neuer spalte auch..

PHP-Code:


<style type="text/css">



body { background-color:#ffe;  font-family: Arial; font-size:100%; font-color:#FF0;}



#o-top-l { background-color:#51a; height:30px; padding:0px; margin:0; float:left;}

#o-top-m { background-color:#56D; height:30px; padding:0px; margin:0; float:left;}

#o-top-r { background-color:#556; height:30px; padding:0px; margin:0; float:right;}



#top { background-color:#567; height:100px; padding:0px; margin:0; float:left;}



#u-top-l { background-color:#50a; height:30px; padding:0px; margin:0; float:left;}

#u-top-m { background-color:#5aD; height:30px; padding:0px; margin:0; float:left;}

#u-top-r { background-color:#5bf; height:30px; padding:0px; margin:0; float:right;}



#footer { background-color:#32DDDD; height:30px; padding:0px; margin:0 ; float:left; }



</style>

**hero-master** · 27.07.2011 13:34

Hau das padding: 0; margin: 0; einfach raus. Du definierst in der blueprint.css ja auch margin-right für einige Divs und löschst es dann durch eben diese Zeile wieder raus. Dadurch die unterschidlichen Abstände

**digismo** · 27.07.2011 13:40

juhu... 1000 dank. stimmt das wars. ist glaub ist immer so, wenn man neu mit was anfängt (wie ich mit blueprint) dass man dann vor lauter wald die bäume ned sieht... :-D

**digismo** · 27.07.2011 15:17

so nächstes problem---- ich hab die images im richtigen ordner.. siehe: hintergrund grafik für die einzelnen zellen.. aber warum nimmt er es nicht für die ganze seite. komisch

http://www.domain-nation.de/

PHP-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html><head>

<title>background-color</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen, projection" />

<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />

<!--[if IE]><link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /><![endif]-->



<style type="text/css">







#body {

    background-color:#ffe;

    background-image:url(images/bg_seite.png); background-repeat:repeat-x;

    font-family: Arial;

    font-size:100%;

    font-color:#456;

}



#container { background-color:#fff; float:left;}



#overtop { background-color:#fff; height:50px; float:left;}



#o-top-l { background-color:#51a; height:30px; float:left;}

#o-top-m { background-color:#56D; height:30px; float:left;}

#o-top-r { background-color:#556; height:30px; float:right;}



#top { background-color:#567; height:30px; float:left;}









#header { background-color:#4ff; background-image:url(images/bg_seite.png); background-repeat:repeat-x; height:100px; float:left;}



#u-header-l { background-color:#50a; height:30px; float:left;}

#u-header-m { background-color:#5aD; height:30px; float:left;}

#u-header-r { background-color:#5bf; height:30px; float:right;}



#nav-l { background-color:#10a; background-image:url(images/bg_verl_obengr1.png); background-repeat:repeat-x; height:300px; float:left;}

#content { background-color:#19a; background-image:url(images/bg_seite.png); background-repeat:repeat-x; height:300px; float:left;}



#footer { background-color:#32DDDD; height:30px; float:left; }



</style>



</head>



<body>





    <div class="container">

  

           <div id="overtop" class="span-24 last">

                   overtop     

           </div>

  

           <div id="o-top-l" class="span-8">

                    o-top-l

           </div>             

              

           <div id="o-top-m" class="span-8">

                    o-top-m

           </div>             

                 

           <div id="o-top-r" class="span-8 last">

                   o-top-r         

           </div>   

          

           <div id="top" class="span-24 last">

                   top     

           </div>

           

 

  

            <div id="header" class="span-24 last">

                 header      

           </div>  

           

           <div id="u-header-l" class="span-8">

            u-header-l

          </div>             

              

          <div id="u-header-m" class="span-8">

         u-header-m

          </div>             

                 

          <div id="u-header-r" class="span-8 last">

              u-header-r         

          </div>  

    

  

    

          

          <div id="nav-l" class="span-6">

                   nav-l

          </div>  

                             

          <div id="content" class="span-18 last">

                   content

          </div>

                                

          <div id="footer" class="span-24 last">

       999999

          </div>

          

    </div>



</body>

**hero-master** · 27.07.2011 16:39

Zitat von digismo

aber warum nimmt er es nicht für die ganze seite. komisch

Ne, nicht komisch: logisch

#body {
background-color:#ffe;
background-image:url(images/bg_seite.png); background-repeat:repeat-x;
font-family: Arial;
font-size:100%;
font-color:#456;
}
Hier definierst du nicht den body-Tag, sondern durch den Hash (#) für ein Objekt mit der ID "body". Weg mit dem # und es klappt

**digismo** · 27.07.2011 16:51

*in die ecke stell und rot werd*
danke.... hab ich in der eile ned gesehn. hatte vorher nämlich auch ne body class und die hab ich aber wieder gelöscht...

**digismo** · 27.07.2011 18:22

so..langsam bin ich zufrieden mit dem grundlayout... einzig der schatte will nicht da hin wo er soll :-(
setze ich left auf 0 ist der schatten am linken rand. setzte ich was anderes als 0 zb 1 oder 10 oder sonst was dann ist er um ca 10 px nach rechts verschoben (siehe www.domain-nation.de) . feste pixelzahl kann ich ned nehmen weil es ja dann fix ist während sich der inhalb verschiebt beim auf/zuzeihn des browser fensters.

#art-page-background-glare{ position: absolute; width: 100%; height: 480px; left: 1; top: 1;}
#art-page-background-glare-image {
background-image: url(images/page_gl.png);
background-repeat: no-repeat;
height: 480px;
width: 1050px;
}

**hero-master** · 27.07.2011 19:13

Hey

hier machst du es meiner Meinung nach viel zu kompliziert. Lass mal den ganzen ##art-page-background-glare Div weg und bau den Schatten in die .container-Klasse. So ungefähr:

Code:

.container { background: url(images/page_gl.png) no-repeat; overflow: hidden; padding: 0 26px }

**Thomas** · 27.07.2011 20:03

[OT]
code-boxen sind eine schöne Errungenschaft

[/OT]

**digismo** · 30.07.2011 10:09

danke erstmal für deine ausführliche hilfe.
die code box. muss ich mir angucken. ist einfach übersichtlicher :-) mach ich das nächste mal wenn geht..

das mit dem schatten will noch nicht ganz. im html-editor (dreamweaver) wird zwar in der ansicht code/entwurf mit schatten angezeigt aber nicht loka im browser (ie und ff)l und auch nicht hochgeladen auf dem server . muss ich mich tnochmal drübersetzen wenn ich vom einkaufen zurück bin. gestern bin ich ned dazu gekommen war im training. hab aber samstag nachmittag dafür reserviert. bis dann

update..
hatte im css style ne überschüssige } geschlossen klammer.die ist jetzt raus..... jetzt hab ich , wenn ich die seite lokal im browser öffen sowohl die repate-x hintergrund grafik und den schatte...

die codes hab ich jetzt in die index.php datei des zu bearbeitenden atomic templates in joomla kopiert.. und siehe da: hintergrund grafik und schatten sind wieder weg... :-( . im templatesDetails sind die dateien eingetragen.

so nur die page online.. da passt es jetzt
http://www.domain-nation.de/
aber in joomba template integriert.. dann gehts ned :-(

update..
ok wer suchet der findet. geschafft. danke nochmal für die hilfe

zur Startseite vom TP

Thema: blueprint sorgt für unordnung? oder mach ich was falsch

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

blueprint sorgt für unordnung? oder mach ich was falsch

Ähnliche Themen

RealURL: Was mach ich falsch?

Was mach ich Falsch?

Was mach ich da falsch?

Zwei eBay-Reinfälle nacheinander oder mach ich irgendwas falsch???

Aktive Benutzer

Aktive Benutzer