Lijntje header alleen links

[damnsharp]

Hoi!
Ik wil een lijntje bij een ontwerp niet door laten lopen naar rechts maar het moet alleen linksboven zichtbaar zijn (doorlopend naar links). Ik link naar plaatje bijvoegen, het gaat om het rode dikke lijntje linksboven.
De blauwe lijntjes zijn hoe je de website op 980px breed scherm ziet.

link naar plaatje ontwerp website
Geen idee of dit kan en hoe ik dat zou kunnen doen. Kijk, als het door zou lopen zou ik het wel weten

Thanks en alvast goed weekend!

 

[Remq]

Ik weet niet hoe je de site op hebt gezet/wil gaan opzetten maar dit kan op heel veel manieren. Je zou bijvoorbeeld een <span> kunnen maken en die met CSS opmaken.

<span class="topLeftBorder">

CSS:

.topLeftBorder
{
position: absolute;
left: 0;
top: 0;
height: (dikte van de lijn, bijv 2px);
background-color: (kleur van de lijn);
width: (de lengte van de linkerkant van het scherm, tot aan het einde van het logo)
}

 

[damnsharp]

@Remq, dank je wel voor je reactie! Inderdaad ik zal je even linkje naar test html/css site zetten die ik nu heb gemaakt. Als je de structuur ziet is het wat helderder.
test website

Wat ik nu heb is dat de body een background met een gradient plaatje heeft op de juiste hoogte als menu (dus pagina breed wordt).
De container heb ik rode lijn boven gegeven en het plaatje rechts boven (fotomodule wordt dat later) laat ik negatieve marge top geven om over de lijn te zetten.

Maar een rode lijn linksboven krijg ik niet voor mekaar. Misschien moet ik de structuur aan gaan passen om het wel voor mekaar te krijgen, bijv. met een container links, midden, rechts te werken?

 

[Remq]

Je container heb je een breedte meegegeven. De border zal dus nooit breder kunnen worden dan die breedte. Het is dus verstandig om de border los te maken van de container. Dat kun je doen op de manier die ik eerder zei: je haalt de border weg van de container en plaatst een los element (zoals een span of een div) die de border representeert.

Van de CSS van de container haal je dus de border-top regel weg. Je kan dan beter wel even padding-top: 5px; toevoegen zodat de rest van de opmaak niet te veel overhoop gaat.

Vervolgens kun je het span element toevoegen die ik je eerder had gegeven. Deze kan zowel binnen als buiten de container div geplaatst worden. De CSS hiervan moet zijn:

.topLeftBorder
{

position: absolute;
left: 0;
top: 0;
height: 5px;
background-color: #e2001a;
width: 50%;
margin-left: -220px;
min-width: 550px;​

}

Zo heb ik hem getest en zo werkte hij prima. Laat maar weten al het niet lukt!

 

[damnsharp]

Hoi @Remq, dank je voor de reactie. Ik begrijp dat het lijntje nooit zo breed als de container kan worden, dat is inderdaad het probleem. Ik snap nu wat je bedoeld met een span toevoegen die los van de container staat en die voor het rode lijntje moet zorgen.
Alleen, ik heb het geprobeerd en nu valt de structuur in duigen. De footer springt naar boven en de container staat niet meer netjes in het midden.
Ik verwacht dat het komt door het positioneren van die span. Wil je er even naar kijken?

 

[damnsharp]

Oh @Remq, nog een aanvulling; dankzij jouw hulp heb ik wat geprobeerd met 3 containers en dat gaat wel maar nu weet ik niet of jouw originele plan een voordeel heeft t.o.v. 3 containers; voorbeeld heb ik op deze site staan.

 

[damnsharp]

@Remq, kan je me nog uitleggen hoe jouw plan werkte en het voordeel t.o.v. 3 containers? Of is het alleen een andere manier van werken. Bedankt.