Css

Status
Niet open voor verdere reacties.
K

KREEFTMEIJER

Gebruiker
Lid geworden
14 sep 2010
Berichten
188
Ik maak gebruik van een template en wil daar iets in veranderen
er is een background waar een plaatje in staat met de afmeting 746 x 270 px
ik wil 746 x 135 px hieronder de css
Code: 
#content{
background-image:url(images/front99.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
width:746px;
overflow:hidden;
float:left;
Hier wordt wel de breedte aangegeven maar niet de hoogste
Heb al geprobeerd hight: 135px maar dat werkt niet.
Wie kan mij een stap verder helpen.

Groet,
Henk Kreeftmeijer

De site waarom het omgaat is Toppages.nl
 
Laatst bewerkt door een moderator:
Je bent je bewust van de typfout?
"hight:" in plaats van "height:"
 
KREEFTMEIJER zei:
[...] een plaatje ...met de afmeting 746 x 270 px,
ik wil 746 x 135 px
Code: 
#content{
background-image:url(images/front99.gif);
background-position:top left;
background-repeat:no-repeat;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
width:746px;
overflow:hidden;
float:left;
Klik om te vergroten...

De breedte die hier wordt aangegeven is de breedte van de div, niet van het plaatje.
Van het plaatje worden helemaal geen afmetingen aangegeven; hoeft ook niet want het is (toevallig!) even breed als de div.

Het plaatje wordt in de linkerbovenhoek van de div geplaatst en niet ge-repeat.

Als je dus het plaatje zelf inkort tot de gewenste hoogte, zal het gewoon op dezelfde plaats blijven staan (linkerbovenhoek) en alleen minder hoogte innemen.


KREEFTMEIJER zei:
Heb al geprobeerd hight: 135px maar dat werkt niet.
Klik om te vergroten...

Daarmee pas je dus eigenlijk de hoogte van de div#content aan.
 
Na de pagina bekeken te hebben gaat dat inderdaad niet werken.
Deze stijl wordt immers op de volledige DIV toegepast.

Pas je de hoogte aan gaat de hele div krimpen waardoor je dus de tekst niet meer ziet.

Twee opties
  1. Afbeelding aanpassen
  2. Aparte div voor de achtergrond waardoor je de hoogte wel aan kunt passen zonder de tekst te verliezen
 
neeee,..niet nog meer css!

Tha Devil zei:
Twee opties
  1. Afbeelding aanpassen
  2. Aparte div voor de achtergrond waardoor je de hoogte wel aan kunt passen zonder de tekst te verliezen
Klik om te vergroten...

Aan de css-rules die zijn toegekend aan Div#content is niks mis. Deze div werkt prima.
Bovendien gaat het erom de afbeelding minder hoog te maken;
aan de div is heel terecht geen specifieke hoogte toegekend, die regelt dat lekker automatisch.

Jouw eerste optie om de afbeelding aan te passen is verreweg de beste, want haalt verder niks overhoop.
Waarom zou je dan nog een aparte div erbij maken?


royb3 zei:
position:absolute; ? :P
Klik om te vergroten...

Wat lossen we daarmee op?
 
Ik heb een afbeelding gemaakt 746 x 135 px maar er veranderd niets.
De pagina staat op toppages.nl/index99.html.
Henk
 
aanpassen padding van de div met class=search

Het verschil tussen de onderkant van het Royal Residence-plaatje
en het begin van de tekst Residence Royal
zit 'm in de padding-bottom van <div class=search>

Die padding-bottom is 162px
als je dat verandert in (bijv.) 70px
dan zul je zien dat "de kloof" wordt teruggebracht tot aanvaardbare proporties.



Hetzelfde geldt natuurlijk voor de oorspronkelijke index-pagina.
Als je daar de padding van <div class=search> aanpast gaat de tekst ook omhoog
alleen komt die dan over het huidige plaatje heen (omdat dat nog 270px hoog is)
 
Laatst bewerkt:
Hoi Henk,
  1. De hele ongebruikte <div class=search><span></div> wegwerpen.
  2. Het background-image:url(images/front99.gif) uit de css wegwerpen (zal op een andere pagina een ander img moeten worden, en misschien met andere hoogte; dus bg-img niet zo geschikt).
  3. Img als voorgrond-img in de html plaatsen:
    HTML: 
    <div id="content">
    <img src="images/front99.gif" width="746" height="135" alt="">
    <div class="column1">
    ... enz.
En dan de .column1 en .column2 wat (meer) margin-top geven.
Is dat niet afdoende?

Met vriendelijke groet,
CSShunter
____________
PS: Ik zou dus de hidden tekst/link (!):
HTML: 
<div class="inner_copy">free templates<a href="http://www.bannermoz.com/">banner templates</a></div>
er ook uit halen. Dat is link-spam, en zal waarschijnlijk door Google niet zo gewaardeerd worden. Of wel gewaardeerd, maar dan met een lagere ranking. ;)
 
Laatst bewerkt:
tekst rechts verdwijnt nu naar onderen

<div class=search><span></div>
Heb ik verwijderd en en de hmtl erin geplakt.
Staat nu keurig naar boven alleen de rechtertekst is naar onderen verschoven.

Groet,
Henk
 
Hoi Henk, mooi!
Ik zie nog dat in Firefox, Chrome, Opera en Safari de #footer niet de footer-background krijgt. Daar hangen partjes van bovenin aan de zijkanten (en voor de rest onzichtbaar vanwege de overlappende plaatjes). In IE7 zit de footer-bg wel op de goede plaats.
Is te repareren met:
Code: 
#footer {
    background-image:url(images/footer_bg.gif);
    ... enz.
    clear: both;
    }
Verklaring: de 3 kolommen erboven hebben allemaal een {float:...;} en drijven daarmee buiten de "normal flow" (gewone stroomrichting) van de html. Het eerste niet-gefloate element na de floats begint dan als element op dezelfde hoogte als de kolommen. *) Daarom staat het bg-image van de footer bovenaan! Maar als de inhoud van dat element niet naast de floats past, dan gaat de inhoud wel naar beneden. Dat is bij de footer het geval, en daar beneden is dan niet de background.
Met het clearen van floats komt een element uit de normal flow er weer wel onder.
  • Ik zou ook nog even de puntjes van de html-validator nalopen, voor de puntjes op de i.
    Als je bovenaan het waslijstje begint met corrigeren, zal je zien dat een aantal andere foutmeldingen opeens verdwijnen als sneeuw voor de zon. Dat schiet lekker op!
    :)
Met vriendelijke groet,
CSShunter
___________
*) Dit kan je zien door de #footer even een tijdelijke border te geven. In FF enz. omvat die óók de kolommen boven de footer!
 
Als je kijkt op index98.html dan is het footer background probleem al verdwenen.
Ik had het ook al gezien en denk dat met het knutselen in 99.html iets fout is gegegaan.
Henk
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan