Avatar billede idasb Nybegynder
04. januar 2004 - 11:39 Der er 16 kommentarer

Kobling og placering/positionering af elementer

Hej
Jeg har virkelig brug for noget hjælp til CSS. Jeg vil starte med at sige, at jeg er nybegynder, så jeg vil meget gerne have det skåret ud i pap :-)

Mit problem er som følger:
Jeg forsøger at lave en side (www.brygmann.dk/blog/test) hvor top-billedet skal fylde hele sidens bredde. Nedenunder vil jeg gerne have teksten samt side-menuen (kalender, links etc) centreret. Men...
1) Hvordan får jeg angivet positionen? Skal de to elementer linkes sammen?
1.1) Jeg har i html dokumentet oprettet en <div id="container"> der skulle indbefatte de to elementer, og det er den jeg refererer til i mit stylesheet. Et forsøg på at koble de to elementer.
2) Hvorfor ser det næsten ok ud i IE 6.0, men meget sært ud i Firebird 0.7? Det er som om positionerne på de forskellige elementer ikke er faste.

Jeg håber der er en eller flere der kan hjælpe mig her!
Avatar billede idasb Nybegynder
04. januar 2004 - 14:31 #1
Her er CSS koden:

    body {
        margin:0px 0px 10px 0px;
        background:#6699CC;
        }

    A    { color:#99CCFF; text-decoration:none; }
    A:link    { color:#99CCFF; text-decoration:none; }
    A:visited{ color:#99CCFF; text-decoration:none; }
    A:active{ color:#99CC66; }
    A:hover    { color:#99CC66; }

    h1, h2, h3 {
        margin: 0px;
        padding: 0px;
                    }

#banner {
    background-image:url(http://www.brygmann.dk/blog/archives/Banner.gif);
    background-repeat:auto ;
    width: auto; height: 270px;
}

        #banner h1 {
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:xxx-large;
        font-weight:bold;
        padding:15px;
        text-transform:uppercase;
        letter-spacing:.4em;
                margin-left:15px;
                margin-top:200px;
        }

        #banner a,
        #banner a:link,
        #banner a:visited,
        #banner a:active,
        #banner a:hover {
        font-family:verdana, arial, sans-serif;
        font-size: x-large;
        color: #CCCC00;
        text-decoration: none;
        }

    .description {
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:x-small;
        font-weight:bold;
        background:#6699CC;
        text-transform:none;
        letter-spacing:normal;
        }
        #container {
            margin:0px auto;
            padding:15px;
            background: #6699CC;
            width:75%;
            }

    #content {
        float:left;
        width:55%;
        background:#6699CC;
        margin-right:10px;
        padding-bottom:20px;
                text-align:justify;
                border-left:1px solid #99CC66;
                border-right:1px solid #99CC66;
        }

    #links {
        padding-right:15px;
                width: 300px;
        }

    .blog {
        padding-left:15px;
        padding-top:15px;
        padding-right:15px;       
                padding-bottom:15px;                   
        }

    .blogbody {
        font-family:verdana, arial, sans-serif;
        color:#006666;
        font-size:small;
        font-weight:normal;
        background:#6699CC;
        line-height:140%;
        padding-left:10px;
        padding-right:10px;
        padding-top:10px;´
                padding-bottom:10px;
        }

    .title {
        font-family:verdana, arial;
        font-size:large;
        color:#CCCC00;
        text-transform:uppercase;
        font-weight:bold;
        }

    #menu {
        margin-bottom:15px;
        background:#6699CC;
                text-align:right;
        }

    .date {
        font-family:verdana, arial, sans-serif;
        font-size:small;
        color:##FFFFFF;
        border:1px solid #99CC66;
        padding:5px;
        margin-bottom:10px;
        font-weight:normal;
        }

    .posted    {
        font-family:verdana, arial, sans-serif;
        font-size:x-small;
        color:#99cc66;
        margin-bottom:15px;
        }

    .calendar {
        font-family:verdana, arial, sans-serif;
        color:#CCC;
        font-size:x-small;
        font-weight:normal;
        background:#6699CC;
        line-height:140%;
        padding:2px;
        text-align:right;
        }

    .calendarhead {                       
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:small;
        font-weight:bold;
                text-transform:uppercase;
        background:#6699CC;
        line-height:140%;
        padding:2px;
        }

    .side {
        font-family:verdana, arial, sans-serif;
        color:#99CCff;
        font-size:x-small;
                text-transform:uppercase;
        font-weight:normal;
        background:#6699CC;
        line-height:140%;
        padding:2px;
                text-align:right;
        }

    .sidetitle {
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:x-small;
        font-weight:bold;
        line-height:140%;
        padding:2px;
        margin-top:10px;
        text-align:right;
        text-transform:uppercase;
        letter-spacing:.2em;
        }

    .syndicate {
        font-family:verdana, arial, sans-serif;
        font-size:xx-small;
        line-height:140%;
        padding:2px;
        margin-top:10px;
        text-align:center;
        }

    .powered {
        font-family:verdana, arial, sans-serif;
        color:#CCC;
        font-size:xx-small;
        font-weight:bold;
        border-top:1px solid #CCC;
        border-bottom:1px solid #CCC;
        line-height:140%;
        text-transform:uppercase;
        padding:2px;
        margin-top:10px;
        text-align:center;
        letter-spacing:.2em;
                width:300px;
        }

    .comments-body {
        font-family:verdana, arial, sans-serif;
        color:#CCC;
        font-size:small;
        font-weight:normal;
        background:#6699CC;
        line-height:12px;
        padding-left:10px;
        padding-right:10px;
        padding-bottom:15px;
        }

    .comments-post {
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:x-small;
        font-weight:normal;
        background:#6699CC;
        }

    .comments-head {
        font-family:verdana, arial, sans-serif;
        font-size: small;
        color: #CCC;
        border:1px solid #999;
        padding:5px;
        font-weight:normal;
        margin-top:10px;
        }

    #banner-commentspop {
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:large;
        font-weight:bold;
        border-bottom:1px dotted #999;
        border-top:3px dotted #999;
        background:#6699CC;
        padding:15px;
        text-transform:uppercase;
        letter-spacing:.2em;
        }       
       
    .trackback-body {
        font-family:verdana, arial, sans-serif;
        color:#666;
        font-size:small;
        font-weight:normal;
          background:#333;
          line-height:140%;   
          padding-top:15px;               
        }       

    .trackback-url {
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:small;
        font-weight:normal;
          background:#6699CC;
          line-height:140%;   
          padding:5px;
          border:1px dashed #999;            
        }

    .trackback-post {
        font-family:verdana, arial, sans-serif;
        color:#CCCC00;
        font-size:x-small;
        font-weight:normal;
          background:#6699CC;
          margin-bottom:20px;
        }
Avatar billede roenving Novice
04. januar 2004 - 16:43 #2
Kan ikke helt gennemskue, hvad det er du ønsker, men måske sådan ?-)

body {
        width:100%;
        margin:0px 0px 10px 0px;
        background:#6699CC;
        text-align:center;
        }
#container{
        margin-right:auto;
        margin-left:auto;
        text-align:left;
        }

-- og hvorfor har du en margin på 10px i bunden ?-)
Avatar billede idasb Nybegynder
04. januar 2004 - 16:58 #3
både og.... det er placeret rigtig nu, ved at sige:
#container{
        margin-right:auto;
        margin-left:auto;
        text-align:left;
        margin-left:10%;
        }

men det holder kun delvist i IE og ikke i fx. Firebird. Og selv i IE er de to 'spalter' ikke centrerede. www.brygmann.dk/blog/test
Jeg ville gerne at de altid var centrerede uanset skærmopløsning og browser. Mht. de 10px. så synes jeg det var pænest :-)
Avatar billede roenving Novice
04. januar 2004 - 17:06 #4
Du kan ikke have både en auto og en 10%, da en efterfølgende sætning af en property vil overskrive tidligere satte værdier !-)

-- og relative angivelser af størrelser er netop relative til størrelsen på omkransende positionerede elementer, derfor var der også en størrelse på body, har du taget den med ?-)

-- og text-align:center; er et ie4/5-hack til centrering ...
Avatar billede idasb Nybegynder
04. januar 2004 - 17:14 #5
ok, det er rettet nu til:
#container{
        margin-right:10%;       
        text-align:left;
        margin-left:10%;
        }
Har du en forklaring på hvorfor det ikke virker i Firebird?

body ser således ud:
    body {
        width:100%;
        margin:0px 0px 10px 0px;
        background:#6699CC;
        text-align:left;
        }

men det centrerer stadig ikke.
Avatar billede roenving Novice
04. januar 2004 - 17:18 #6
Skal di container fylde 80 % eller skal den centreres ?-)
Avatar billede idasb Nybegynder
04. januar 2004 - 17:20 #7
den skal centreres
Avatar billede roenving Novice
04. januar 2004 - 17:22 #8
Så er det:

#container{
        margin-right:auto;
        margin-left:auto;
        text-align:left;
        }
Avatar billede idasb Nybegynder
04. januar 2004 - 17:24 #9
nej. så bliver det hele rykket til venstre... desværre!
Avatar billede roenving Novice
04. januar 2004 - 17:32 #10
Hvor ?-)
Avatar billede roenving Novice
04. januar 2004 - 17:33 #11
text-align:center på body ?-)
Avatar billede idasb Nybegynder
04. januar 2004 - 17:35 #12
hvis jeg laver text-align:center; på body, er det kun overskriften test der flytter sig
Avatar billede roenving Novice
04. januar 2004 - 17:44 #13
Toppen skulle komme på plads med:

#banner {
    position:relative;
    background-image:url(http://www.brygmann.dk/blog/archives/Banner.gif);
    background-repeat:auto ;
    width: auto;
    height: 270px;
    top:0px;
}

-- og gør den ikke det, er der noget andet galt, som jeg ikke lige kan gennemskue !-)
Avatar billede idasb Nybegynder
04. januar 2004 - 17:56 #14
Overnævnte rettelse til #banner ændrer ikke på hvordan det ser ud i Firebird.

Desværre fungerer det heller ikke... For at flytte teksten ind mod midten bliver jeg nødt til at sætte margin-left:10%; i #container. Men kan det have at gøre med
          #content {
        float:left;
        width:60%;
        background:#6699CC;       
                margin-right:10px;
        padding-bottom:20px;
                text-align:justify;
                border-left:1px solid #99CC66;
                border-right:1px solid #99CC66;
        }
Avatar billede roenving Novice
04. januar 2004 - 17:59 #15
Den sad jeg også og kiggede på før, men da den er inde i container skulle det ikke spille nogen trille ...
Avatar billede idasb Nybegynder
04. januar 2004 - 18:01 #16
men, jeg er i tvivl om, hvorvidt den også er i #container. I HTML dokumentet ser er #container sat ind her, og afsluttet helt nede i bunden, næsten, men det kan være at det er der fejlen ligger?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<$MTPublishCharset$>" />

<title><$MTBlogName$></title>

<link rel="stylesheet" href="<$MTBlogURL$>styles-site.css" type="text/css" />
<link rel="alternate" type="application/rss+xml" title="RSS" href="<$MTBlogURL$>index.rdf" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="<$MTBlogURL$>rsd.xml" />

<script language="javascript" type="text/javascript">
function OpenComments (c) {
    window.open(c,
                    'comments',
                    'width=480,height=480,scrollbars=yes,status=yes');
}

function OpenTrackback (c) {
    window.open(c,
                    'trackback',
                    'width=480,height=480,scrollbars=yes,status=yes');
}
</script>

<MTBlogIfCCLicense>
<$MTCCLicenseRDF$>
</MTBlogIfCCLicense>

</head>

<body>

<div id="banner">
<h1><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName$></a></h1>
<span class="description"><$MTBlogDescription$></span>
</div>

<div id="container">
<div id="content">

<div class="blog">

<MTEntries>
<$MTEntryTrackbackData$>

    <MTDateHeader>
    <h2 class="date">
    <$MTEntryDate format="%x"$>
    </h2>
    </MTDateHeader>

    <div class="blogbody">
   
    <a name="<$MTEntryID pad="1"$>"></a>
    <h3 class="title"><$MTEntryTitle$></h3>
   
    <$MTEntryBody$>
   
    <MTEntryIfExtended>
    <span class="extended"><a href="<$MTEntryPermalink$>#more">Continue reading "<$MTEntryTitle$>"</a></span><br />
    </MTEntryIfExtended>
   
    <div class="posted">Posted by <$MTEntryAuthor$> at <a href="<$MTEntryPermalink$>"><$MTEntryDate format="%X"$></a>
    <MTEntryIfAllowComments>
    | <a href="<$MTCGIPath$><$MTCommentScript$>?entry_id=<$MTEntryID$>" onclick="OpenComments(this.href); return false">Comments (<$MTEntryCommentCount$>)</a>
    </MTEntryIfAllowComments>
    <MTEntryIfAllowPings>
    | <a href="<$MTCGIPath$><$MTTrackbackScript$>?__mode=view&amp;entry_id=<$MTEntryID$>" onclick="OpenTrackback(this.href); return false">TrackBack (<$MTEntryTrackbackCount$>)</a>
    </MTEntryIfAllowPings>
    </div>
   
    </div>
   


</MTEntries>

</div>

</div>


<div id="links">



<div align="center" class="calendar">

<table border="0" cellspacing="4" cellpadding="0" summary="Monthly calendar with links to each day's posts">
<caption class="calendarhead"><$MTDate format="%B %Y"$></caption>
<tr>
<th abbr="Sunday" align="center"><span class="calendar">Sun</span></th>
<th abbr="Monday" align="center"><span class="calendar">Mon</span></th>
<th abbr="Tuesday" align="center"><span class="calendar">Tue</span></th>
<th abbr="Wednesday" align="center"><span class="calendar">Wed</span></th>
<th abbr="Thursday" align="center"><span class="calendar">Thu</span></th>
<th abbr="Friday" align="center"><span class="calendar">Fri</span></th>
<th abbr="Saturday" align="center"><span class="calendar">Sat</span></th>
</tr>

<MTCalendar>
<MTCalendarWeekHeader><tr></MTCalendarWeekHeader>

<td align="center"><span class="calendar">
<MTCalendarIfEntries><MTEntries lastn="1"><a href="<$MTEntryPermalink$>"><$MTCalendarDay$></a></MTEntries></MTCalendarIfEntries><MTCalendarIfNoEntries><$MTCalendarDay$></MTCalendarIfNoEntries><MTCalendarIfBlank>&nbsp;</MTCalendarIfBlank></span></td><MTCalendarWeekFooter></tr></MTCalendarWeekFooter></MTCalendar>
</table>

</div>

<div class="sidetitle">
Search
</div>

<div class="side">
<form method="get" action="<$MTCGIPath$><$MTSearchScript$>">
<input type="hidden" name="IncludeBlogs" value="<$MTBlogID$>" />
<label for="search" accesskey="4">Search this site:</label><br />
<input id="search" name="search" size="20" /><br />
<input type="submit" value="Search" />
</form>
</div>

<div class="sidetitle">
Archives
</div>

<div class="side">
<MTArchiveList archive_type="Monthly">
<a href="<$MTArchiveLink$>"><$MTArchiveTitle$></a><br />
</MTArchiveList>
</div>

<div class="sidetitle">
Recent Entries
</div>

<div class="side">
<MTEntries lastn="10">
<a href="<$MTEntryPermalink$>"><$MTEntryTitle$></a><br />
</MTEntries>
</div>

<div class="sidetitle">
Links
</div>

<div class="side">
<a href="">Add Your Links Here</a><br />
</div>

<div class="syndicate">
<a href="<$MTBlogURL$>index.rdf">Syndicate this site (XML)</a>
</div>

<MTBlogIfCCLicense>
<div class="syndicate">
<a href="<$MTBlogCCLicenseURL$>"><img alt="Creative Commons License" border="0" src="<$MTBlogCCLicenseImage$>" /></a><br />
This weblog is licensed under a <a href="<$MTBlogCCLicenseURL$>">Creative Commons License</a>.
</div>
</MTBlogIfCCLicense>

<div class="powered">
Powered by<br /><a href="http://www.movabletype.org">Movable Type <$MTVersion$></a><br />   
</div>

</div>
</div>

<br clear="all" />

</body>
</html>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester