Breedte verbreden

[PimGroenendijk]

welke van de vier links moet ik gaan om m'n layout te verbeden? En eenmaal daar.. naar welke code moet ik zoeken om de lengte en breedte van de layout te wijzigen naar iets breder formaat..

bvd

 

[Berkery]

Bij gebrek aan glazen bol, of relevante code een gokje; maar ik denk dat je in styles.css op zoek moet gaan naar een element dat een waarde heeft voor de eigenschap 'width', en dat zullen er meerdere zijn, maar zoek er eentje met een hoge waarde en pas die aan.

 

[csshunter]

Hoi Pim,
Ik heb Google op www.google.nl/search?q=elegance+fjt als glazen bol gebruikt.

• Daar kwam een demo uit: www.joomla-templatedemo.de/?template=elegance-fjt

Met Firebug in Firefox kwam ik tegen (inderdaad in het stylesheet style.css):

#header { ...; width: 960px; ... }
#wrapper  { ...; width: 960px; ... }
#centercontent { ...; width: 500px; ... }
#user-bottom  { ...; width: 960px; ... }
#bottom  { ...; width: 960px; ... }

Als ... ik die vijf een grotere breedte geef door er voor elk hetzelfde aantal px bij op te tellen, wordt de pagina breder, met behoud van de breedte van de twee zijkolommen,

Maar ... het template is, zoals het is, ook geschikt voor een resolutie van 1024*768px (die nog redelijk veel gebruikt wordt, dacht ik).
Ga je de breedte vergroten, dan past het er bij 1024*768px niet meer op, en krijgen bezoekers met die resolutie onderin een horizontale scrollbar die ze steeds moeten gebruiken om de pagina te kunnen lezen.

Dus of het wel zo'n goed idee is, weet ik niet.

Met vriendelijke groet,
CSShunter

 

[PimGroenendijk]

het moet verbreed worden omdat de tekst net niet past, daardoor maar met een paar px verbreden.

Ik kan het overigens niet vinden in styles.css.. zoals Berkery al zei.. er zijn er een heleboel van met hoge waardes

 

[PimGroenendijk]

/* Header */
#header { position:relative; height:145px; width:960px; margin: 0px auto 0; -moz-border-radius: 5px; border-radius:5px;}
#header-w {position:relative;}
.top {color:#fff;width:450px;overflow:hidden; padding:20px 0 0 0; margin:0 0 0 500px;z-index:1;}
.top a {color:#fff; text-decoration:underline}
.logo { position:relative; left:30px; color:#fff; top: 14px;}
.slogan { position:absolute; left:210px; color:#fff; top: 105px;}
.tguser { position:absolute; right:10px; top: 0px; color:#fff; float:right;}

.topmenu {right:130px; top:10px; float:right; height:22px;font-family: segoe ui, verdana, arial, sans-serif; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px; webkit-bottom-right-radius: 7px; webkit-bottom-left-radius: 7px ;}
.topmenu ul {margin:0; padding:0; float:left; -moz-border-radius: 5px; border-radius: 5px;}
.topmenu ul li {list-style:none;float:left;height:100%;position:relative;}
.topmenu ul li a { display:block;padding:0 10px 0 10px; margin:0; line-height:22px; color:#fff; text-decoration:none;font-size:12px;font-weight:normal; font-family: 'Terminal Dosis', sans-serif;}
.topmenu ul li.active {}
.topmenu ul li.active a {}
.topmenu ul li:hover {}
.topmenu ul li a:hover{ text-decoration:none; font-weight:normal; font-size:12px; -moz-border-radius: 5px; border-radius: 5px; color:#03b6dd;text-shadow:none;}
.topmenu ul li ul {position:absolute;width:180px;left:-999em;border-top:0; margin:0; padding:0;}
.topmenu ul li:hover ul, #menu ul li.sfHover ul {left:0;}
.topmenu ul li ul li {padding:0;height:auto;width:180px; margin:0; border:none;}
.topmenu ul li:hover ul li a {text-shadow:none;}
.topmenu ul li:hover ul li { background:none;}
.topmenu ul li:hover ul li a, .topmenu ul li ul li a, .topmenu ul li.active ul li a{margin:0; padding:0 0 0 10px;height:24px;line-height:24px; background:#555;border-bottom:1px solid #3a3a3a;color:#d1d1d1; font-size:11px;font-weight:normal;text-shadow:none;}
.topmenu ul li ul li a:hover, .topmenu ul li ul li.active a, .topmenu ul li.active ul li a:hover, .topmenu ul li.active ul li.active a {margin:0; padding:0 0 0 10px;height:24px;line-height:24px;background:#343434;color:#fff; font-size:11px;text-shadow:none;}
.topmenu ul li ul ul, .topmenu ul li:hover ul ul, .topmenu ul li:hover ul ul ul, .topmenu ul li:hover ul ul ul ul, .topmenu ul li.sfHover ul ul, .topmenu ul li.sfHover ul ul ul, .topmenu ul li.sfHover ul ul ul ul {left:-999em;}

Een heleboel codes, maar ik geloof dat hij hier bij moet staan; bij de header. Het zou helpen als eventuele markering zou kunnen worden toegepast.

 

[csshunter]

Hoi Pim,

Ik kan het overigens niet vinden in styles.css ... Een heleboel codes ...

Zeker weten, je ziet al gauw door de bomen het bos niet meer.

In de demo zie ik de style.css de volgende opbouw hebben:

/* Main Layout */
.....

/* Header */
[COLOR="blue"]#header[/COLOR] { position:relative; height:145px; [B][COLOR="red"]width:960px[/COLOR][/B]; margin: 0px auto 0; -moz-border-radius: 5px; border-radius:5px;}
.....

/* Navigation */
.....

/* Sidebar */
.....

/* Content */
.....
[COLOR="blue"]#wrapper[/COLOR] { margin:0 auto; [B][COLOR="red"]width:960px[/COLOR][/B]; padding:0;position: relative;}
.....
[COLOR="blue"]#centercontent[/COLOR]{[B][COLOR="red"]width:500px[/COLOR][/B];float:left;margin:5px 0 0 10px;padding:0px;overflow:hidden;}
.....

/* Content styles */
.....

/* Contact styles */
.....

/* Modules 1 */
.....
/* Modules 2 */
.....
/* Modules 3 */
.....


/* Footer */
.....
[COLOR="blue"]#bottom[/COLOR] {[B][COLOR="red"]width:960px[/COLOR][/B]; margin:0 auto; padding:5px 0 0 0; background: #e1e1e1 ; -moz-border-radius-bottomright: 7px; -moz-border-radius-bottomleft: 7px; border-bottom-right-radius: 7px; border-bottom-left-radius: 7px;-moz-box-shadow: 0 0 5px #555;-webkit-box-shadow: 0 0 5px#555;box-shadow: 0 0 5px #555;}
.....

/* System Messages */
.....
/* System Standard Messages */
.....
/* System Error Messages */
.....
/* System Notice Messages */
.....
/* Debug */
.....

[COLOR="blue"]#user-bottom[/COLOR] { background: #555 ; [B][COLOR="red"]width: 960px[/COLOR][/B]; margin:0 auto; padding: 0; text-align: left; height: 100%;}
.....

Volgens mij moet je de rode getallen hebben om te wijzigen volgens m'n reactie nr. #3 hierboven.
Je merkt vanzelf of het goed gaat.

• Noteer eerst wel even de oude waarden voor als het niet goed mocht gaan. Of nog beter: maak eerst even een lokale reservekopie van die styles.css. Want een puntje of komma te veel of te weinig kan de meest vreselijke gevolgen hebben, en kom er dan maar eens achter waar de tikfout zit! (kan meestal wel met de css-validator, maar dan weet je nog niet wat er had moeten staan).

Succes!
Met vriendelijke groet,
CSShunter
___________
PS: De site-breedte aanpassen om regels er op te krijgen kan gevaarlijk zijn. Als een zin er net op past en een bezoeker stelt een andere lettergrootte in, dan past het er toch niet op, en komt het op een volgende regel.
Met tekst kan je niet pixel-precies werken; de opmaak moet daarom flexibel genoeg zijn zijn om verschillende lettergroottes / regelhoogtes te kunnen opvangen. Als het goed is, zou het template uit zichzelf zo in elkaar moeten zitten.

 

[PimGroenendijk]

En hoe wijzig ik de linker kant van de 'center' layout? Of is dit niet mogelijk?

Tweede vraag: Hoe laat ik mijn tekst doorlopen met mijn verbrede layout?


Bvd voor de moeite alvast