Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag13.09.2013 um 15:22 (UTC)    
Titel: CSS Design Unterseiten verschiedene Width zuweisen

Hallo HPBKler,

ich habe mal wieder ein kleines Problem und wollte wissen ob mir vielleicht jemand dabei helfen kann Smile

Ich hab mich nun endlich mal wieder an meine website FSN gesetzt: http://fs-network.page.tl

FSNetwork hat mehrere Unterseiten auf denen entweder ein Text steht, oder eine andere website via iFrame eingebunden ist. Wenn möglich, hätte ich es gerne, dass Textseiten nur ca. 900px breit sind und zentriert angezeigt werden, iFrames sollen jedoch die volle breite habe.

Hier zwei Bilder:

http://img.webme.com/pic/n/nilssisten/fsnetworkpage.png (Textseite)
http://img.webme.com/pic/n/nilssisten/fsnetworkframe.png (Frame)

Wir kriege ich das realisiert??


Ich hab jetzt Provisorisch einfach über allen pages die ich mit geringerer width haben wollte den folgenden code eingefügt, aber das ist glaube ich nicht valid oder?

Code:

<style type="text/css" media="screen">
<!--
#container {
margin: 0px auto;
width: 960px;
overflow: hidden; }
//-->
</style>




lG
Noni



Mein Design:

Text über Design:

Code:
<a href="<br-s->Home.htm">
<div id="Home"></div>   
</a>

<div id="Line"> </div>   
<div id="Line2"> </div>   




CSS Code:


Code:
/* Ausblenden */

h1#header{display: none;}

h2#title{display: none;}



/* Werbung positionieren */

table[height="102"] {
position: absolute;
left: 50%;
top: -1px;
margin-left: -370px; }

div#webme_sky_ad{
width: 160px;
position: absolute;
top: 160px;
margin-left: -160px;
right: 0;
left: 100%;
}



/* Inhalt */

div#content{
padding-top: 0px;
padding-left: 0px;
font-family: tahoma, arial;
color: #333333;
background-color:#fffffd;
}



/* Header */

body {
background-color:#555555;
background-image:url(http://img.webme.com/pic/f/fs-network/fsnetworkbackground4.png);
background-repeat:repeat;
}



/* Home Button */

#Home {
position:absolute;
left: 50%;
height: 32px;
width: 32px;
margin-top: 110px;
margin-left: -310px; 
background-image: url(http://img.webme.com/pic/f/fs-network/fsnetworklogowhite32x32.png);



/* Trennstriche */

#Line {
position:absolute;
left: 50%;
height: 32px;
width: 2px;
margin-top: 10px;
margin-left: 322px; 
background-image: url(http://img.webme.com/pic/f/fs-network/fsnetworktrennstrich.png);


#Line2 {
position:absolute;
left: 50%;
height: 32px;
width: 2px;
margin-top: 10px;
margin-left: 632px; 
background-image: url(http://img.webme.com/pic/f/fs-network/fsnetworktrennstrich.png);



/* Design-Container mittig */
#container {
width: 960px;
margin: 0px auto;
overflow: hidden; }


/* Navigation */

#nav_container {
   height: 54px;
   left: 50%;
   margin-left: 96px;
   margin-top: 98px;
   padding-top: 0px;
   padding-left: 0px;
   background: url(http://img.webme.com/pic/f/fs-network/fsnetworkbutton.png);
   overflow: hidden;
font-family: tahoma, arial;
font-weight: bold;
font-size: 13px;
}

ul#nav {
   list-style-type: none;
}

li.nav_element {
   width: 99px;
   height: 56px;
   margin-top: -16px;
   border-right: 0px solid #ffffff;
   text-align: center;
   line-height: 56px;
   float: left;
}

li.nav_element a {
   color: #FDFDFD;
   text-decoration: none;
   display: block;
}

li.nav_element:hover, li.checked_menu {
   background: url(http://img.webme.com/pic/f/fs-network/fsnetworkbuttonhover4.png);
}

li.nav_element a:hover, li.checked_menu a {
   color: #FFFFFF;
}


Zuletzt bearbeitet von nilssisten am 13.09.2013, 16:33, insgesamt einmal bearbeitet
Beitrag16.09.2013 um 08:00 (UTC)    
Titel:

Heyho Noni,
valide ist das leider wirklich nicht. Der Standart besagt, dass alle Style Angaben in den Head-Bereich gehören. Allerdings fällt mir spontan keine andere Möglichkeit ein, als die, die du gewählt hast.

Mit Javascript wäre es machbar, allerdings nur für ein Bruchteil der Browser kompatibel. Ich würde dir daher eher zu der Variante raten, die du aktuell verwendest.

Beste Grüße,
Mats


Zuletzt bearbeitet von matsk am 16.09.2013, 09:01, insgesamt 2-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de