FlexBrakel
Nieuwe gebruiker
- Lid geworden
- 13 mei 2014
- Berichten
- 1
De website is ontworpen in Illustrator en vandaar kreeg ik de opdaracht om de text 11.5pt groot te maken en de interlinie 16pt groot. in illustrator zag het er goed uit maar als ik alles in css zet dan is het opeens veel te groot.
de hele site is 730px breed en 710px hoog, de kolombreedte waar de text in moet is 140px breed. Wat doe ik hier fout?
zo hoort de site er uit te zien: http://i.imgur.com/Fbl16WZ.png
de hele site is 730px breed en 710px hoog, de kolombreedte waar de text in moet is 140px breed. Wat doe ik hier fout?
HTML:
<!DOCTYPE html>
<html>
<head>
<title> SP Holland </title>
<meta name = "keywords" content = "bouwen, verbouwen, SP Holland">
<meta name = "description" content = "">
<meta name = "author" content = "Code: Felix Brakel, Design: Jolanda Koelemij, Tekst: Bram Diepstraten ">
<link rel = "stylesheet" type = "text/css" href = "../Style sheets/CSS Sebastiaan.css">
</head>
<body>
<!-- header section -->
<div class = "headerplacement">
<img src = "../Images/logo.png" alt = "logo">
<div class = SPheader>
<img src = "../Images/sphollandlogogrijs.png" alt = "SP Holland logo licht">
<div class = "SPheaderBG">
<div class = SPheaderBGedge>
<img src = "../Images/rondingbalk.png" alt = "rondingbalk">
</div>
<div class = "WhiteBar">
</div>
<div class = "aligntextballoon1">
<img src = "../Images/tekstballonbovendeel1.png" alt = "tekst van logo voor">
<div class = "aligntextballoon2">
<img src = "../Images/tekstballonbovendeel2.png" alt = "tekst bij logo achter">
</div>
</div>
<div class = "MainBG">
<div class = "invisibleline">
<div class = "textcolumn">
<p class = "TextStyleGrey">SP-Holland is een allround bouwbedrijf met een opvallende spe- ialisatie: restauraties en renovaties van monu- mentale gebouwen en historische signatuur elementen in gebouwen.</p>
<ul class = "UnorderedOrange">
<li><span class = "BulletOrientation">monumentale grachte- npanden</span></li>
<li><span class = "BulletOrientation">karakteristieke kantoor- panden in binnensteden</span></li>
<li><span class = "BulletOrientation">klassieke boerderijen</span></li>
<li><span class = "BulletOrientation">bijzondere plafonds</span></li>
<li><span class = "BulletOrientation">inpandige elementen van historische waarde</span></li>
</ul>
<img style = "position:relative; left:-10px; top:-20px; Width:160px; Height:160px; z-index:0;" src = "../Images/rosset.png" alt = "rosset">
<p class = "TextStyleMain"> In dergelijke projecten komen ons vakmanschap, onze creativiteit, deskundig- heid, betrokkenheid en klantgerichtheid op een bijzondere manier samen. Met hoogwaardige materia- len en hoog gekwalificeerde vakmensen, leveren wij een topprestatie voor een concurrerende prijs. </p>
</div>
<div class = "line156">
<div class = "line8">
<div class = "textcolumn">
<img style = "position:relative; top:-40px;" src = "../images/huisje.png" alt = "huisje">
<img style = "position:relative; top:-40px;" src = "../images/kopbouwen.png" alt = "kop bouwen">
<p style = "margin-top:-70px;" class = "TextStyleMain"> SP-Holland verzorgt graag de uitvoering van de bouwplannen voor uw woning, kantoorpand of winkel. Wij beschikken over de vakmensen, ervaring en kennis om uw bouwproject tot uw volle tevredenheid uit te kunnen voeren.</p>
<img style = "position:relative; top:-17px;" src = "../Images/kopkeuken.png" alt = "kop keuken">
<p style = "margin-top:-49px" class = "TextStyleMain">Voor ingewikkeld en oud leidingwerk draaien wij onze hand niet om. Wij maken van uw oude badkamer of keuken een mooie en prettige ruimte die aan alle bouweisen voldoet.</p>
<img style ="position:relative; left:-7px; width:156px; height:124px;" src = "../Images/bad.jpg">
</div>
<div class = "line156">
<div class = "line8">
<div class = "line156">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "goedbouwenballoon">
<img src = "../Images/tekstballongoedbouwen.png" alt = "beter bouwen ballon">
</div>
</div>
</div>
</body>
</html>
Code:
.headerplacement
{
position:absolute;
top:22px;
left:35%;
}
.aligntextballoon1
{
position:absolute;
bottom:58.45px;
left:121px;
}
.aligntextballoon2
{
position:absolute;
top:0px;
left:400px;
}
.goedbouwenballoon
{
position:absolute;
bottom:-52.45px;
left:500px;
z-index:-2;
}
.SPheader
{
position:absolute;
top:130px;
left:50px;
z-index:100;
}
.SPheaderBG
{
position:absolute;
top:0px;
left:-102px;
height:63px;
width:687px;
z-index:-1;
background-color:rgb(209, 216, 223);
}
.SPheaderBGedge
{
position:absolute;
top:0px;
right:-43px;
z-index:-1;
}
.WhiteBar
{
position:absolute;
bottom:-4px;
left:0px;
width:730px;
height:4px;
background-color:rgb(255,255,255);
}
.MainBG
{
position:absolute;
top:67px;
left:0px;
height:710px;
width:730px;
background-color:rgb(239, 241, 243);
}
.invisibleline
{
position:absolute;
bottom:0px;
left:0px;
width:1px;
height:498px;
}
.line156
{
position:absolute;
bottom:0px;
left:156px;
width:1px;
height:618px;
background-color:rgb(206, 216, 223);
}
.line8
{
position:absolute;
bottom:0px;
left:8px;
width:1px;
height:618px;
background-color:rgb(206 ,216, 223);
}
.textcolumn
{
position:absolute;
bottom:0px;
left:6.5px;
width:140px;
height:618px;
}
.TextStyleGrey
{
font-family:"Arial Bold";
font-size:11.5px;
line-height:16px;
text-align:left;
margin-top:0;
color:rgb(122, 146, 164);
}
.UnorderedOrange
{
font-family:"Arial Bold";
font-size:11.5px;
line-height:16px;
text-align:left;
margin-top:10px;
margin-left:-31px;
color:rgb(255, 147,95);
}
.BulletOrientation
{
position:relative;
left:-9px
}
.TextStyleMain
{
font-family:"Arial";
font-size:11.5px;
line-height:16px;
text-align:left;
margin-top:-30px;
}zo hoort de site er uit te zien: http://i.imgur.com/Fbl16WZ.png
