Avatar billede ballum-it Praktikant
09. marts 2011 - 19:39 Der er 13 kommentarer og
1 løsning

Indsætning af div rykker hele designet.

Jeg har i mit design, som ellers ingen problemer har - indsat et par div'er. Det hele kører som det skal, men der bliver et meget stort tomt felt efter de indsatte div's.

Jeg kan simpelthen ikke se hvad der sker.

Nogen der kan fortælle mig hvad jeg har gjort galt?



<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!--#include file="connections/conn.asp"-->

<!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=utf-8" />
<title></title>

<link href="style.css" rel="stylesheet" type="text/css" />

<style type="text/css">
.site #boxcontent p {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
    color: #990000;
    text-align: left;
    vertical-align: top;
    font-weight: normal;
}

.body {
    background-image:url(images/layout/ruBg.jpg);
}
</style>
</head>

<body class="body">
<table width="800" align="center"><tr><td>   

          <table class="header" align="center"><tr><td><img src="/images/logo/logo.png" align="right" /></td></tr></table>
       
            <!-- Slide med note -->   
            <div id="highlight"></div>
           
           
<!-- Start Slider -->
              <div id="slide">       
            <link rel="stylesheet" type="text/css" href="slide/engine/style.css" media="screen" />
            <style type="text/css">a#vlb{display:none}</style>
            <script type="text/javascript" src="slide/engine/jquery.js"></script>
            <script type="text/javascript" src="slide/engine/script.js"></script>
            <div id="wowslider-container">
            <div id="wowslider-images">
            <a href="#"><img src="slide/data/images/bro.jpg" alt="bro" title="bro" id="wows0"/></a>
            <a href="#"><img src="slide/data/images/citronSkiver.jpg" alt="citronSkiver" title="citronSkiver" id="wows1"/></a>
            <a href="#"><img src="slide/data/images/fisker.jpg" alt="fisker" title="fisker" id="wows2"/></a>
            <a href="#"><img src="slide/data/images/solvand.jpg" alt="solVand" title="solVand" id="wows3"/></a>
            <a href="#"><img src="slide/data/images/tomatsalat.jpg" alt="tomatSalat" title="tomatSalat" id="wows4"/></a>
            <a href="#"><img src="slide/data/images/udsigtmolle.jpg" alt="udsigtMolle" title="udsigtMolle" id="wows5"/></a>
            <a href="#"><img src="slide/data/images/vandaften.jpg" alt="vandAften" title="vandAften" id="wows6"/></a>
            <a href="#"><img src="slide/data/images/mandTrae.jpg" alt="mandTrae" title="mandTrae" id="wows7"/></a>
            <a href="#"><img src="slide/data/images/vandet.jpg" alt="vandet" title="vandet" id="wows8"/></a>
           
            </div>
                <a href="#" id="wowslider-frame"></a>
                <div id="wowslider-shadow"></div>
                </div>

          </div>
            <!-- End Slider -->
<!-- menu -->         
   
        <script type="text/javascript">
        <!--
        stm_bm(["menu4559",960,"","",0,"","",0,0,250,0,1000,1,0,0,"","750",0,0,1,2,"default","hand","",1,25],this);
        stm_bp("p0",[0,4,0,0,2,3,0,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","",3,0,0,"#000000"]);
        stm_ai("p0i0",[2,"","scripts/menu/forside_out.jpg","scripts/menu/forside_out.jpg",180,25,0,"index.php","_self","","","","",0,0,0,"","",0,0,0,0,1,"#E6EFF9",1,"#FFD602",1,"","",3,3,0,0,"#E6EFF9","#000000","#000000","#000000","8pt Verdana","8pt Verdana",0,0,"","","","",0,0,0]);
        stm_ai("p0i1",[6,1,"#000000","",-1,-1,0]);
        stm_aix("p0i2","p0i0",[2,"","scripts/menu/fiskeri_out.jpg","scripts/menu/fiskeri_out.jpg",180,25,0,""]);
        stm_aix("p0i3","p0i1",[]);
        stm_aix("p0i4","p0i2",[2,"","scripts/menu/foto_out.jpg","scripts/menu/foto_out.jpg",180,25,0,"foto.php"]);
        stm_aix("p0i5","p0i1",[]);
        stm_aix("p0i6","p0i2",[2,"","scripts/menu/mad_out.jpg","scripts/menu/mad_out.jpg",185]);
        stm_ep();
        stm_em();
        //-->
        </script>
</td></tr></table>
<table class="site"><tr><td>fdsfkdslfdaf<br /><br />
fdsfdfda <br /><br />fdsfdafdsf<br /><br /> fdfdafdsa<br /><br /> fdsafdfda <br /><br />fdsfdafda<br /><br /> fdsfda </td></tr></table>
 
</body>


</html>
Avatar billede ballum-it Praktikant
09. marts 2011 - 19:40 #1
I kan lige få styles.css med også.


@charset "utf-8";
/* CSS Document */

.body {
    background-image:url(file:///D|/Support%20Web-sider/fisk.ej-design.dk/images/layout/ruBg.jpg);
}

.site {
    width: 800px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top:10px;
    background-color:#FFF;
    z-index:1;

}
div#site {
    width: 800px;
    margin-left: auto ;
    margin-right: auto ;
    margin-top:10px;
    background-color:#FFF;
    z-index:1;

}

.header {
    background-image:url(images/layout/topborder.jpg);
    z-index:2;
    height: 63px;
    width: 800px;
    position:relative;
    margin-left: auto;
    margin-right: auto;
}
div#header {
    background-image:url(images/layout/topborder.jpg);
    z-index:2;
    height: 63px;
    width: 800px;
    text-align: left;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 10px;
    font-style: normal;
    color: #fff;
    text-decoration: none;
    margin-left: auto;
    margin-right: auto;
    position:relative;
}

div#slide {
    z-index:3;
    margin-top: 10px;
    position:relative;
    top:-300px;
    left: 0px;
    right: 25px;
    width: 800px;
}


div#highlight {
    z-index: 4;
    margin-left: 50px;
    position:relative;
    background-image:url(images/layout/note.png);
    background-position:left;
    background-repeat:no-repeat;
    height: 300px;
    width: 210px;
    top:-68px;
    color: #900;
    visibility: visible;
}
.highlight {
    z-index: 4;
    margin-left: 50px;
    position:relative;
    background-image:url(images/layout/note.png);
    background-position:left;
    background-repeat:no-repeat;
    height: 300px;
    width: 210px;
    top:-75px;
    color: #900;



}

div#menu {
    margin-top: 10px;
    position:relative;
    top:-450px;
    width: 800px;
    height: 30px;
    left: 35px;
    z-index: 1;
}
.menu {
    margin-top: 10px;
    top:-200px;
    width: 950px;
    height: 30px;
    left: 20px;
}
div#content {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
    padding:10px;
    position:relative;
    top:-420px;
    width: 750px;
    height:auto;
    background-color: #333;
    z-index:6;
    left: 15px;
}


.content {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #fff;
    padding:10px;
    width: 740px;
    background-color: #333;
}

.bg-img{

    -moz-box-shadow: 10px 10px 5px #444;
    -webkit-box-shadow: 10px 10px 5px #444;
    box-shadow: 10px 10px 5px #444;
}

#wrapper {
    width: 800px;
    margin: 0 auto;
    text-align: left;
}


.footer {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 12px;
    color: #fff;
    margin-top: 10px;
    position:relative;
    top:-640px;
    width: 800px;
    height: 20px;
    background-color: #222;
    border-top:#900;
    border-top-width:medium;
    z-index: 6;
}


Og siden kan ses på http://ejwebsite.dk/test.asp
Avatar billede Pkallesoe Nybegynder
09. marts 2011 - 20:43 #2
Jeg er ikke helt med på hvad du gerne vil have det til at gøre ?
Avatar billede ballum-it Praktikant
09. marts 2011 - 20:50 #3
Jeg er ikke vant til at bruge div,men skulle have noget i flere lag, så det var løsningen.

Men der bliver et frygtelig afstand efter et div, som jeg gerne vil have væk. Men aner ikke hvordan. Jeg har bare forsøgt mig med alt.
Avatar billede Jakie Juniormester
10. marts 2011 - 07:26 #4
Har du prøvet at definere din paddings med 0px?
Avatar billede ballum-it Praktikant
10. marts 2011 - 08:10 #5
Ja og det hjælper ikke. Det er også div som laver det. Det ved jeg godt den gør ligesom <p> vil gøre. De giver nogle ekstra linjeskift. Men der er da andre der kan lave perfekte sider med div, så der må være en løsning.
Avatar billede ballum-it Praktikant
10. marts 2011 - 08:13 #6
Jeg kan få det væk ved at lave alt i <div> og derefter give den bagerste (baggrunden) en fast bredde. Men baggrunden vil så ikke følge med, når der tilføjes mere tekst i tekstfeltet, og derved bliver længere.
Avatar billede Jakie Juniormester
10. marts 2011 - 10:23 #7
Width:auto?
Avatar billede olebole Juniormester
10. marts 2011 - 17:26 #8
<ole>

Generelt kan du ikke påregne at kunne finde ud af noget som helst, du ikke har sat dig grundigt ind i. Du mangler tydeligvis at sætte dig ind i helt grundlæggende CSS, og så kan man naturligvis ikke implementere sine ønsker om et webdesign.

Det, der øjensynligt giver dig problemer, er din relative positionering - samtidig med brugen af left- og top-værdier. Et relativt positioneret element vil altid reservere sin oprindelige plads i forhold til det almindelige dokument flow - og derudover den plads, du giver det med left- og top-værdier.

Hvis du gerne vil lege med webkode, bør du helt klart læse meget grundigt på CSS' visuelle formateringsmodel:
    http://www.w3.org/TR/CSS2/visuren.html

Uden at kunne den udenad forfra og bagfra er du ilde stedt i forhold til at få et webdesign til at makke ret  ;o)

/mvh
</bole>
Avatar billede ballum-it Praktikant
13. marts 2011 - 10:45 #9
Jamen undskyld jeg har spildt din tid olebole, det er jeg ked af.

Jeg laver såmænd websites hver eneste dag på jobbet, blot ikke i div. Og lidt har jeg som lært gennem de efterhånden mange år jeg har beskæftiget mig med hjemmeside design og koder. Men lige i forbindelse med div har jeg et hul, som jeg i meget lang tid har undgået, men nu ville ha lært også. Men det bliver så ikke lige nu.

Jeg er som helt sikker på jeg finder ud af det, som jeg har gjort med alt andet.


God søndag til alle,.
Avatar billede olebole Juniormester
13. marts 2011 - 17:31 #10
Du skylder ikke mig nogen undskyldning - men du burde give dig selv en uforbeholden undskyldning for at opføre dig så opgivende og tøsesur.

Det er muligt, nogen giver dig penge for at lave 'webdesign' i tabeller, men det gør dig kun til 'professionel' i den forståelse, at du modtager penge. Du har ikke en håndværksmæssig, professionel tilgang til webdesign, når du stadig layout'er i tabeller - og tråden afslører jo også en yderst begrænset viden om CSS. At rode helt ukritisk rundt med relativ positionering og left- og top-værdier afslører stor mangel på CSS-forståelse.

Uanset, hvordan tingene ser ud i din egen selvforståelse, er du i mine øjne en skændsel for mit fag!
Avatar billede ballum-it Praktikant
14. marts 2011 - 08:52 #11
Tak for dit flabede svar!
Avatar billede olebole Juniormester
14. marts 2011 - 16:39 #12
Selvtak. Hvis du vil høre flere sandheder (det er, hvad vi andre kalder det, du kalder 'flabetheder'), siger du bare til. Hvis du derimod ikke vil, skal du nok gå meget stille med dørene med dine 'professionelle kundskaber'. Enhver professionel webmand med respekt for sig selv og sit fag vil give mig ret  =)
Avatar billede ballum-it Praktikant
14. marts 2011 - 17:28 #13
Hva du gør og mener er mig egentlig ligemeget. Jeg respekterer andres arbejde og den måde de gør det på, og sådan ved jeg også de fleste har det.
Jeg kan foresten ikke finde hvor jeg skulle finde ordet "professionel" i mine udtalelser, det er noget du selv har taget med ind.
Jeg er hverken professionel eller mand. Men derimod en kvinde der laver en del sider på sin egen måde, alle virker perfekt og alle laves fra bunden. Ja jeg bruger tabeller, og hvad så?
Kunderne er tilfredse, siden virker og de funktioner jeg koder virker som de skal.

Om du kommenterer eller ej er ligegyldigt, jeg vil ikke bruge mere tid på denne tråd!

Ha det fortsat godt i den professionelle verden!
Avatar billede olebole Juniormester
14. marts 2011 - 17:46 #14
*LoL* Gad vide, om du vil lade en pølsekvinde (eller hvad du nu kalder en kvinde i en pølsevogn) fortage en gynækologisk operation på dig?

I så fald har du ret i "Jeg respekterer andres arbejde og den måde de gør det på". Ellers vrøvler du jo bare  :D
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