Website div over div

[Pieterpluk]

Beste Helpmij'ers,

Ik ben bezig met een social network script te designen. Nu heb ik een probleem met een div layer. De ene layer valt achter de andere layer waardoor het niet zichtbaar is.

Op http://setos.nl/index.php?do=/mravatar3/, zit ik met het probleem dat de profiel foto van een gebruiker achter de afbeelding van de omslagfoto valt. Nu weet ik dat dit makkelijk is aan te passen in css, maar hoe doe ik dit?

Alvast bedankt!

 

[Pieterpluk]

Ook zou het leuk zijn als er om de profiel afbeelding een soort van rand komt.

 

[lord4163]

Een margin toevoegen?

 

[Pieterpluk]

Een margin toevoegen?

Hoi, heb alle soorten margin toegevoegd. Maar het is nog steeds niet gelukt om deze naar voren te krijgen.
Z-index ook geprobeerd maar geen succes.

Ook zou ik het menu van me website graag willen aanpassen, de menu items zou ik graag gecentreerd willen hebben.

Ook hieruit ben ik nog niet gekomen. Heb de volgende css geprobeerd om het menu te centreren.

Margin-left: auto
Margin-right: auto
Text-align: center

Alvast bedankt

 

[csshunter]

Hoi Pieterpluk,
De css op deze site zit een beetje merkwaardig en gecompliceerd in elkaar.

Maar voor het optoveren van de profiel-foto:

.profile_timeline_profile_photo {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 3px solid green; /* randje */
    bottom: 10px;
    height: 126px;
    left: 20px;
    overflow: hidden;
    padding-top: 0; /* ipv 6px */
    margin-top: 6px; /* toevoegen */
    position: relative; /* ipv absolute */
    text-align: center;
    width: 128px;
}

#js_is_user_profile .profile_header_timeline {
    margin-left: 160px;
    margin-top: -50px; /* toevoegen */
}

• De absolute positie onttrok de profielfoto aan de normale stapeling van de z-index.

=======
Voor het centreren van het menu:

.timeline_main_menu {
    background: none repeat scroll 0 0 #F1F1F1;
    border: 1px solid #DFDFDF;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 5px;
    padding: 5px 0 5px 20px;
    text-align: center; /* toevoegen */
}
.timeline_main_menu li a, .timeline_main_menu li a:hover {
    border-radius: 4px 4px 4px 4px;
    display: inline-block; /* ipv block */
    float: none; /* ipv left */
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 5px;
    padding: 0 8px;
    text-decoration: none;
}

• Een {text-align: center} alleen werkt niet: deze werd ongedaan gemaakt door de {float:left} van de links in het menu. Een {display: inline-block} is nodig omdat de links anders onder elkaar komen te staan.

Met vriendelijke groet,
CSShunter

 

[Pieterpluk]

Hoi Pieterpluk,
De css op deze site zit een beetje merkwaardig en gecompliceerd in elkaar.

Maar voor het optoveren van de profiel-foto:

.profile_timeline_profile_photo {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 3px solid green; /* randje */
    bottom: 10px;
    height: 126px;
    left: 20px;
    overflow: hidden;
    padding-top: 0; /* ipv 6px */
    margin-top: 6px; /* toevoegen */
    position: relative; /* ipv absolute */
    text-align: center;
    width: 128px;
}

#js_is_user_profile .profile_header_timeline {
    margin-left: 160px;
    margin-top: -50px; /* toevoegen */
}

• De absolute positie onttrok de profielfoto aan de normale stapeling van de z-index.

=======
Voor het centreren van het menu:

.timeline_main_menu {
    background: none repeat scroll 0 0 #F1F1F1;
    border: 1px solid #DFDFDF;
    border-radius: 4px 4px 4px 4px;
    margin-bottom: 5px;
    padding: 5px 0 5px 20px;
    text-align: center; /* toevoegen */
}
.timeline_main_menu li a, .timeline_main_menu li a:hover {
    border-radius: 4px 4px 4px 4px;
    display: inline-block; /* ipv block */
    float: none; /* ipv left */
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin-right: 5px;
    padding: 0 8px;
    text-decoration: none;
}

• Een {text-align: center} alleen werkt niet: deze werd ongedaan gemaakt door de {float:left} van de links in het menu. Een {display: inline-block} is nodig omdat de links anders onder elkaar komen te staan.

Met vriendelijke groet,
CSShunter

Beste css hunter u heeft mij een eer verleend, u bent nu een zegene held in de computer business.

Alleen heb ik nog 1 vraagje me css staat nu zo ingesteld dat de profiel afbeelding iets naar benede is geschoven. ik zou deze graag bovenop de omslagfoto willen hebben. Enig idee hoe dit moet?

 

[csshunter]

Hoi Pieterpluk,
Eerst trek je alles onder de afbeelding naar boven door het element waar de afbeelding is zit een negatieve margin-bottom te geven:

.cover_photo_link {
    display: block;
    height: 315px;
    margin-bottom: -60px; /* toevoegen */
    overflow: hidden;
    position: relative;
}

Zo overlapt de profielfoto de afbeelding erboven. Maar nu staan de knoppen "Bericht versturen" en "Voeg toe als vriend" te hoog. Die gaan omlaag door ze wat meer margin-top te geven:

#js_is_user_profile .profile_timeline_header #section_menu {
    margin-top: 45px; /* ipv -8px */
}

En voor het mooi kan de naam naast de profielfoto nog een klein stukje omhoog:

#js_is_user_profile .profile_header_timeline {
    margin-left: 160px;
    margin-top: -60px;   /* ipv -50px */
    margin-bottom: 15px; /* toevoegen */
}

Ik zou ook de <h1> van de naam een iets andere lettergrootte geven, want nu loopt in Firefox, Chrome, Opera en Safari (= alle browsers behalve Internet Explorer) de "i" van "Timmer" vol, en lijkt een "l" te zijn:

Te verhelpen met:

#js_is_user_profile .profile_header_timeline h1 {
    font-size: 2.13em;
}

=======
Hoe kom ik snel achter dit soort dingen???

• Niet door alle css van alle html-elementen te gaan zitten doorvlooien. Dan ben je wel een paar dagen zoet: er is een uit één lange regel bestaand stylesheet van 38kB, en daarnaast een stylesheet van 3kB, plus een stylesheet van 1kB, plus nog een stylesheet van één lange regel van 1kB, plus nog de nodige inline-styles in de html elf. Daar staan heel wat id's, classes en styles in...
  Vóór je er achter bent wat elk stylesheet op zich betekent, en dan ook nog hoe al deze style-voorschriften op elkaar inwerken... zal de klok heel wat uurtjes weggetikt hebben!
  
  
• Wel door Firebug voor Firefox te gebruiken.
  Je geeft één rechtsklik op het element waar je iets van wilt weten, en er komt een venster waarin je precies ziet welke css daar allemaal op slaat. En het mooie: je kunt dat online veranderen om te zien wat er dan gebeurt! - Heb je de goede aanpassingen, dan hoef je die alleen maar in je css erbij te zetten, en klaar!

Met vriendelijke groet,
CSShunter

 

[Pieterpluk]

Hoi Pieterpluk,
Eerst trek je alles onder de afbeelding naar boven door het element waar de afbeelding is zit een negatieve margin-bottom te geven:

.cover_photo_link {
    display: block;
    height: 315px;
    margin-bottom: -60px; /* toevoegen */
    overflow: hidden;
    position: relative;
}

Zo overlapt de profielfoto de afbeelding erboven. Maar nu staan de knoppen "Bericht versturen" en "Voeg toe als vriend" te hoog. Die gaan omlaag door ze wat meer margin-top te geven:

#js_is_user_profile .profile_timeline_header #section_menu {
    margin-top: 45px; /* ipv -8px */
}

En voor het mooi kan de naam naast de profielfoto nog een klein stukje omhoog:

#js_is_user_profile .profile_header_timeline {
    margin-left: 160px;
    margin-top: -60px;   /* ipv -50px */
    margin-bottom: 15px; /* toevoegen */
}

Ik zou ook de <h1> van de naam een iets andere lettergrootte geven, want nu loopt in Firefox, Chrome, Opera en Safari (= alle browsers behalve Internet Explorer) de "i" van "Timmer" vol, en lijkt een "l" te zijn:

Te verhelpen met:

#js_is_user_profile .profile_header_timeline h1 {
    font-size: 2.13em;
}

=======
Hoe kom ik snel achter dit soort dingen???

• Niet door alle css van alle html-elementen te gaan zitten doorvlooien. Dan ben je wel een paar dagen zoet: er is een uit één lange regel bestaand stylesheet van 38kB, en daarnaast een stylesheet van 3kB, plus een stylesheet van 1kB, plus nog een stylesheet van één lange regel van 1kB, plus nog de nodige inline-styles in de html elf. Daar staan heel wat id's, classes en styles in...
  Vóór je er achter bent wat elk stylesheet op zich betekent, en dan ook nog hoe al deze style-voorschriften op elkaar inwerken... zal de klok heel wat uurtjes weggetikt hebben!
  
  
• Wel door Firebug voor Firefox te gebruiken.
  Je geeft één rechtsklik op het element waar je iets van wilt weten, en er komt een venster waarin je precies ziet welke css daar allemaal op slaat. En het mooie: je kunt dat online veranderen om te zien wat er dan gebeurt! - Heb je de goede aanpassingen, dan hoef je die alleen maar in je css erbij te zetten, en klaar!

Met vriendelijke groet,
CSShunter

Super bedankt! Ik doe momenteel de opleiding Applicatie ontwikkelaar op het Regio College in Zaandam, Ik hoop zeker dat wij ook van zulke lessen gaan krijgen. De kennis die hierbij nodig is is heel verfijnd zie ik al en je moet maar net de goede tools hebben om het aan te kunnen passen.

Vind het super, mijn idee is eigenlijk om me hele website een nieuwe layout te geven. Maar eerst wil ik natuurlijk genoeg kennis opdoen van css door mijn opleiding.

Mag ik dan tot slot nog een css vraag vragen?

Wanneer je op me site een foto bekijkt zie je dat de lightbox die de foto's weergeeft te groot opent waardoor er een stuk uit beeld valt. Kan dit css zijn of is dit losse php script die de style meebrengt?

En ook wanneer ik op de timeline kijk van gebruikers en mezelf zie ik gebruikers met een ge-resizde afbeelding...

 

[Pieterpluk]

Hoi Pieterpluk,
Eerst trek je alles onder de afbeelding naar boven door het element waar de afbeelding is zit een negatieve margin-bottom te geven:

.cover_photo_link {
    display: block;
    height: 315px;
    margin-bottom: -60px; /* toevoegen */
    overflow: hidden;
    position: relative;
}

Zo overlapt de profielfoto de afbeelding erboven. Maar nu staan de knoppen "Bericht versturen" en "Voeg toe als vriend" te hoog. Die gaan omlaag door ze wat meer margin-top te geven:

#js_is_user_profile .profile_timeline_header #section_menu {
    margin-top: 45px; /* ipv -8px */
}

En voor het mooi kan de naam naast de profielfoto nog een klein stukje omhoog:

#js_is_user_profile .profile_header_timeline {
    margin-left: 160px;
    margin-top: -60px;   /* ipv -50px */
    margin-bottom: 15px; /* toevoegen */
}

Ik zou ook de <h1> van de naam een iets andere lettergrootte geven, want nu loopt in Firefox, Chrome, Opera en Safari (= alle browsers behalve Internet Explorer) de "i" van "Timmer" vol, en lijkt een "l" te zijn:

Te verhelpen met:

#js_is_user_profile .profile_header_timeline h1 {
    font-size: 2.13em;
}

=======
Hoe kom ik snel achter dit soort dingen???

• Niet door alle css van alle html-elementen te gaan zitten doorvlooien. Dan ben je wel een paar dagen zoet: er is een uit één lange regel bestaand stylesheet van 38kB, en daarnaast een stylesheet van 3kB, plus een stylesheet van 1kB, plus nog een stylesheet van één lange regel van 1kB, plus nog de nodige inline-styles in de html elf. Daar staan heel wat id's, classes en styles in...
  Vóór je er achter bent wat elk stylesheet op zich betekent, en dan ook nog hoe al deze style-voorschriften op elkaar inwerken... zal de klok heel wat uurtjes weggetikt hebben!
  
  
• Wel door Firebug voor Firefox te gebruiken.
  Je geeft één rechtsklik op het element waar je iets van wilt weten, en er komt een venster waarin je precies ziet welke css daar allemaal op slaat. En het mooie: je kunt dat online veranderen om te zien wat er dan gebeurt! - Heb je de goede aanpassingen, dan hoef je die alleen maar in je css erbij te zetten, en klaar!

Met vriendelijke groet,
CSShunter

Iedergeval bedankt! Als ik nog wat kan terugdoen qwa hosting of email of wat dan ook hoor ik het wel

 

[csshunter]

Wanneer je op me site een foto bekijkt zie je dat de lightbox die de foto's weergeeft te groot opent waardoor er een stuk uit beeld valt. Kan dit css zijn of is dit losse php script die de style meebrengt?

Als ik de site op mijn beeldscherm van 1280*1024px bekijk, zie ik dit:

Het gebruikte image heet dan: setos.nl/file/pic/photo/2013/01/938545cac8468a3a08aac818262b1260_1024.png
Het gebruikte image heeft dan als formaat: 723px × 536px.

=======
Zet ik het scherm op 1024*768px, en herlaad ik de pagina, dan komt er dit:

Het gebruikte image heet dan: setos.nl/file/pic/photo/2013/01/938545cac8468a3a08aac818262b1260_500.png
Het gebruikte image heeft dan als formaat: 500px × 370px.

=======
Zet ik daarna het scherm weer terug op 1280*1024px (zonder herladen van de pagina), dan komt er dit:

=======
Als ik javascript uit zet, komt niet de thickbox, maar ga ik naar deze "kale foto-pagina": setos.nl/index.php?do=/photo/20/untitled/userid_1/

=======
Wat er kennelijk gebeurt:

• De thickbox-lightbox wordt met javascript opgehaald.
• De rechterkolom wordt eerst neergezet.
• Wat er aan de linkerkant over is, wordt zwart verduisterd.
• Op grond van de pagina-breedte (resp. beschikbare zwart-breedte) wordt een al of niet ge-resized image in de thickbox gezet.
• Onder de thickbox zit nog steeds de oude pagina met het oude image, maar dat is aan het oog onttrokken door de "overlay" (het zwarte er-overheen-geplakt-element) van de thickbox.

=======

Wanneer ik op de timeline kijk van gebruikers en mezelf zie ik gebruikers met een ge-resizde afbeelding...

Ja, klopt. Alle afbeeldingen zijn 100*100px gemaakt, en ze staan allemaal ook zo op de server:

• http://setos.nl/file/pic/user/2013/01/bb0857f1e1396a4e9d910d8ff480af0f_100_square.jpg
• http://setos.nl/file/pic/user/2013/01/d85a9e24d5b5368f3155b0571c5bd922_100_square.jpg
• enz.

Waarschijnlijk is dat gebeurd bij het uploaden van de images: wat de maten ook zijn, ze worden na uploaden tot 100*100 vierkantjes geconverteerd, en die komen bij setos op de server.

=======
Samengevat:

1. De setos-site is een CMS, dat op php en javascript draait. Daar heb je weinig invloed op, want het gebeurt server-side.
2. Er zitten standaard een aantal css-styles in. Daar kan je met een custom.css iets aan veranderen, maar lang niet alles.

Dus als je zegt: "mijn idee is eigenlijk om m'n hele website een nieuwe layout te geven", dan denk ik dat dat niet of alleen heel erg moeilijk zal gaan wegens de beperkingen die aan het gebruik van de setos-hosting vast zitten.

Hetzelfde geldt bv. voor een Facebook-pagina, of een andere social-media website: ook die hebben een vaststaand raamwerk waar iedereen in moet passen.

Wil je echt 100% een eigen ontwerp/opmaak, dan zal je het hele beheer over een site moeten hebben, zodat je alles kunt editten (en niet slechts een deel, zoals nu).

• Erg handig is ook de Webdeveloper Toolbar voor Firefox, die kan net als Firebug veel; tijd besparen.
• Hier nog wat tips voor zelfbouw.

Veel succes met je studie en met css!
En alvast gefeliciteerd voor over 5 daagjes.
Met vriendelijke groet,
CSShunter
__________
PS: Je hoeft bij een bericht niet het hele voorafgaande bericht als quote op te nemen: dat wordt wel gesnapt.