curvelicious in een two column layout - Softwareontwikkeling

woensdag 12 oktober 2005 11:30

Acties:

Topicstarter

Ik probeer volgende layout te maken waarbij de rode cirkel een logo is, die ik met behulp van curvilicious wil slices zodat de tekst er mooi omheen gaat. Probleem is enkel dat die slices altijd helemaal onder de content van de linker div komen zoals in het eerste voorbeeld ipv van mooi aan te sluiten zoals in het tweede vb.

Tweakers

code:

#nav {
    background-image: url(../images/Untitled-1_03.jpg);
    width: 143px;
        height:300px;
    background-repeat: no-repeat;
    background-position: left top;
    float: left;
    clear:right;
    }
#content {
    width:100%;
    height:500px;
    margin-left: 143px;
    background-color:red;
    }

#header {
    background-image: url(../images/Untitled-1_01.jpg);
    height: 115px;
    background-repeat: no-repeat;
    background-position: left top;
    color: #006;
    margin-bottom: 0px;
}
        
img.logo {
        float: left;
        clear:both;
         margin:0; }
</style>
</head>
<body>

<div id="header">

</div>

<div id="nav">
<br />
</div>

<div id="content">

[img]"../images/Untitled-1_04.jpg"[/img]
[img]"../images/Untitled-1_06.jpg"[/img]
[img]"../images/Untitled-1_08.jpg"[/img]
[img]"../images/Untitled-1_10.jpg"[/img]
[img]"../images/Untitled-1_11.jpg"[/img]

qfqfq

</div>


</body>
</html>

Zit nu al heel de voormiddag te knutselen met de float's en de clears, maar ik kom er echt niet uit. Als ik die clear van de img.logo weghaal, begint hij wel bovenaan, maar staan alle slices achter elkaar.

edit:
verstuur ipv bekijk geduwd, waarom zitten ze ook zo dicht bij elkaar

[ Voor 103% gewijzigd door -Klimaks- op 12-10-2005 11:40 ]

In those days spirits were brave, the stakes were high, men were REAL men, women were REAL women, and small furry creatures from Alpha Centauri were REAL small furry creatures from Alpha Centauri.
Zaphod in The Hitchhikers Guide To The Galaxy

woensdag 12 oktober 2005 11:31

Acties:

Willem

Fijn.

En wat is je probleem

Motor onderhoud bijhouden

woensdag 12 oktober 2005 11:32

Acties:

BtM909

Watch out Guys...

Mocht je een probleem hebben bij het realiseren van deze layout, kan je dan wel iets meer info verschaffen?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 12 oktober 2005 11:41

Acties:

Barracuda_82

mkTime(), not war!

Misschien moet je de backgroundimage van het deel dat niet op zijn plek zit even goed positioneren:

Cascading Stylesheet:

1	background-position: left top;

woensdag 12 oktober 2005 11:44

Acties:

-Klimaks-

Topicstarter

Barracuda_82 schreef op woensdag 12 oktober 2005 @ 11:41:
Misschien moet je de backgroundimage van het deel dat niet op zijn plek zit even goed positioneren:
Cascading Stylesheet:
1
background-position: left top;

De rechts onder kant van de cirkel staat er als gewone image, zodat de tekst er rond kan vloeien. Dit kan niet als ik die als background van de content div zet afaik.

In those days spirits were brave, the stakes were high, men were REAL men, women were REAL women, and small furry creatures from Alpha Centauri were REAL small furry creatures from Alpha Centauri.
Zaphod in The Hitchhikers Guide To The Galaxy

woensdag 12 oktober 2005 11:45

Acties:

disjfa

be

-Klimaks- schreef op woensdag 12 oktober 2005 @ 11:44:
[...]
De rechts onder kant van de cirkel staat er als gewone image, zodat de tekst er rond kan vloeien. Dit kan niet als ik die als background van de content div zet afaik.

Maak er één plaatje van. Zet deze als achtergrond van je container en zet de paddings van je container goed.

[ Voor 3% gewijzigd door disjfa op 12-10-2005 11:46 ]

disjfa - disj·fa (meneer)
disjfa.nl

woensdag 12 oktober 2005 11:52

Acties:

-Klimaks-

Topicstarter

disjfa schreef op woensdag 12 oktober 2005 @ 11:45:
[...]

Maak er één plaatje van. Zet deze als achtergrond van je container en zet de paddings van je container goed.

mjah, maar als ik het goed voor heb, moet ik dan toch per regel een andere padding opgeven om de tekst echt langs de rand van die cirkel te laten vloeien, of denk ik nu verkeerd?

Bedoeling is dat het als volgt wordt.

code:

******** qqqqqqqqqqqqqqqqq
***** qqqqqqqqqqqqqqqqqqqqqqqqqqqqqq
*** qqqqqqqqqqqqqqqqqq
* qqqqqqqqqqqqqqqqqqqqqqqqqqqq

In those days spirits were brave, the stakes were high, men were REAL men, women were REAL women, and small furry creatures from Alpha Centauri were REAL small furry creatures from Alpha Centauri.
Zaphod in The Hitchhikers Guide To The Galaxy

woensdag 12 oktober 2005 11:54

Acties:

Yoozer

minimoog

Als je dat wil doen zou ik eens kijken naar http://www.alistapart.com/articles/crosscolumn2

teveel zooi, te weinig tijd

woensdag 12 oktober 2005 12:18

Acties:

Savantas

Tja, als ik jou code neem krijg ik in IE, op een vervelende rand in het figuur na (boxmodel?) wel at je wil. Maar in FF word inderdaad alles een stuk naar onder geknikkerd, net onder de nav-div.

Zie vb.

Afbeeldingslocatie: http://tweakers.net/ext/f/68299/thumb.png

Kijk anders ook even bij ragged float?

Wacht, gevonden geloof ik.
Zet je #nav op position: absolute; ! Nu IE nog...

code:

<style type="text/css">
* { margin: 0; padding: 0; }
div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
    background: #fff;
}
#nav {
    position: absolute; top: 40px;
    background: url(images/bolleke_02.png) no-repeat right top;
    width: 84px;
    height:300px;
    }
#content {
    width:100%;
    margin-left: 84px; padding-bottom: 500px; background: #CDC6CD; }

#header { background: url(images/bolleke_01.png) left top no-repeat;
    height: 40px;
    color: #006;
    margin-bottom: 0;
     padding-left: 250px; }
img.logo { float: left; clear: both; }
p { padding: 5px; font-family: Tahoma;color: #333333; font-size: 11px; }
</style>
</head>
<body>
<div id="nav"><br></div>
<div id="header">
<h1>Blaa</h1>
</div>
<div id="content">[img]"images/bolleke_03.png"[/img]
[img]"images/bolleke_05.png"[/img]
[img]"images/bolleke_07.png"[/img]
[img]"images/bolleke_08.png"[/img]
[img]"images/bolleke_10.png"[/img]
<p>Lorem ipsum dolor...</p>
</div>
</body>
</html>

Hmm, die rand krijg ik met geen mogelijkheid kwijt

[ Voor 91% gewijzigd door Savantas op 12-10-2005 14:43 ]

Ik denk niet zwart-wit, ik denk diapositief! ( ͡° ͜ʖ ͡°)