sawMedlem sedan mars 20011 880 inlägg Jag har lite problem med min css. Jag har lyckats med att få breden "flytande" dvs den följer med om jag gör webbläsaren bredare och smalare till en viss punkt, perfekt. Nu ville jag göra det med höjden men det skiter sig ...
#content
{
//i css
position:relative;
margin:auto auto auto auto;
top:70px;
bottom:10px;
width:90%;
min-width:950px;
height:90%;
min-height:580px;
overflow:hidden;
background-color: White;
border-left:3px solid #2E5881;
border-right:3px solid #ADC2D6;
border-top:3px solid #2E5881;
border-bottom:3px solid #ADC2D6;
}
Det jag inte tycker om är att jag inte kan få höjden "dynamiskt" :(
Danne VMedlem sedan aug. 20068 090 inlägg Inte helt 100 men...
Det beror ofta på att det element som omger "ditt" element, dvs föräldern, inte har höjden definerad. Eftersom du vara visar stilmallen för #content och inte all kod (både html och css) så kan man alltså inte svara exakt.
Börja med att ge html och body 100% höjd.
sawMedlem sedan mars 20011 880 inlägg Tack för snabbt svar, det element som emger är body
body
{
background-image:url('../Bild/Footer.png');
background-repeat:repeat-x;
background-color:#6E92B3;
font: 11px/1.4em Comic Sans MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:0;
margin:10px 10px 10px 10px
position:absolute;
top:0;
left:0;
width:97%;
height:98%;
overflow:hidden;
}
Det som omger är
<div class="header">
<div style ="position:absolute; left:15px; top:-5px ; width: 100px; z-index: 2;
height: 80px; color:White;">
<a href="http://www.iogt.se/" title="Besök IOGT-NTO:s webbplats"
target="_blank"><img id="Img1" src="Bild/iogt_logga1.png" alt="Besök IOGT-NTO:s
webbplats" border="0" runat="server" /></a>
</div>
</div>
//och under
<div class="footer lankar"style=" position:absolute; left:0px; bottom:0px; width:100%;" >
<div style="position:absolute; left:43%; bottom:30%;">
<a href ='mailto:info@saw.se?subject=Från%20Tillsammans%3as%20
hemsida'>Webbdesign Benni Svensson</a>
</div>
</div>
HJälper det?
och det vigtigaste är... din doctype är?
(glöm inte sätt en höjd på html-elementet också).
sawMedlem sedan mars 20011 880 inlägg Ursäkta jag glömde:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Vilket html-element menar du, räcker det inte att sätta höjden i css?
sawMedlem sedan mars 20011 880 inlägg Och den skall liga i css också?
När jag la den där så var det ingen skillnad...
kan du postar hela HTML dokumentet och inte bara delar? eller lägg upp det på jsbin/jsfiddle eller någon annan liknande tjänst så man kan se?
sawMedlem sedan mars 20011 880 inlägg Det går tydligen inte att ladda upp de filerna...
lägg upp det på dropbox om du måste lägga upp filer(?)?
Danne VMedlem sedan aug. 20068 090 inlägg Du har ju lagt #container inuti .header i html-koden.
Om du bara flyttar ner den, så funkar det:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
html {height:100%}
body
{
background-image:url('../Bild/Footer.png');
background-repeat:repeat-x;
background-color:#6E92B3;
font: 11px/1.4em Comic Sans MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:0;
margin:10px 10px 10px 10px
position:absolute;
top:0;
left:0;
width:97%;
height:98%;
overflow:hidden;
}
#content
{
//i css
position:relative;
margin:auto auto auto auto;
top:70px;
bottom:10px;
width:90%;
min-width:950px;
height:90%;
min-height:580px;
overflow:hidden;
background-color: White;
border-left:3px solid #2E5881;
border-right:3px solid #ADC2D6;
border-top:3px solid #2E5881;
border-bottom:3px solid #ADC2D6;
}
-->
</style>
</head>
<body>
<div class="header">
<div style ="position:absolute; left:15px; top:-5px ; width: 100px; z-index: 2;
height: 80px; color:White;">
<a href="http://www.iogt.se/" title="Besök IOGT-NTO:s webbplats"
target="_blank"><img id="Img1" src="Bild/iogt_logga1.png" alt="Besök IOGT-NTO:s
webbplats" border="0" runat="server" /></a>
</div>
</div>
[B]<div id="content"></div>[/B]
<div class="footer lankar"style=" position:absolute; left:0px; bottom:0px; width:100%;" >
<div style="position:absolute; left:43%; bottom:30%;">
<a href ='mailto:info@saw.se?subject=Från%20Tillsammans%3as%20
hemsida'>Webbdesign Benni Svensson</a>
</div>
</div>
</body>
</html>
PS: När man ber dig om ALL kod (html och css) så menar man alltså ALL kod, inte de delar som du tror är releventa, utan, alltså, ALL kod. ;)
sawMedlem sedan mars 20011 880 inlägg Tack för svaren men jag kan inte se att det är som du säger Danne V.
Att jag inte skickade med all koden är för att den är väldigt lång men jag prövar med en bild.
Som jag ser det så har jag stängt alla divar utan att blanda ihop dem.
Danne VMedlem sedan aug. 20068 090 inlägg
saw skrev:
Tack för svaren men jag kan inte se att det är som du säger Danne V.
Att jag inte skickade med all koden är för att den är väldigt lång men jag prövar med en bild.
Som jag ser det så har jag stängt alla divar utan att blanda ihop dem.
OK, jag kanske såg fel i den lilla kodsnutten du visat, men jag är i alla fall övertygad om att det är fel någon annan stans i html-koden (den del som du inte visar).
Koden jag klistrade in i mitt förra inlägg och som bygger på det du visat fungerar alldeles utmärkt. Du får väl ta den och försöka applicera på det du har. Och kolla din html igen. Skärmdumpar säger tyvärr ingenting.
sawMedlem sedan mars 20011 880 inlägg Jag skall göra som så att jag skall börja om ifrån 0 och utgår vad du gjorde, och sedan
lägga på div efter div.
Jag tänkte göra likadant när det gäller css, bara ta det viktigaste först. Jag misstänker
som du, att jag har fått med någonting som stör.
Hur som helst tack för era svar, jag återkommer om jag stöter på patrul eller hittar felet.
sawMedlem sedan mars 20011 880 inlägg Jag har nu gjort en ny i visual studio och enbart tagit med det viktigaste.
//css
html {height:100%}
body
{
background-image:url('../Bild/Footer.png');
background-repeat:repeat-x;
background-color:#6E92B3;
font: 11px/1.4em Comic Sans MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:0;
margin:10px 10px 10px 10px
position:absolute;
top:0;
left:0;
width:97%;
height:98%;
overflow:hidden;
}
#content
{
position:relative;
margin:auto auto auto auto;
top:70px;
bottom:10px;
width:90%;
min-width:950px;
height:90%;
min-height:580px;
overflow:hidden;
background-color: White;
border-left:3px solid #2E5881;
border-right:3px solid #ADC2D6;
border-top:3px solid #2E5881;
border-bottom:3px solid #ADC2D6;
}
.header
{
height:70px;
position:absolute;
top:0px;
left:15%;
width:100%;
background-image:url('../Bild/Logga.png');
background-repeat: no-repeat;
z-index:110;
}
.footer
{
position:relative; bottom:0px;
background-image:url('../Bild/Footer_small.png');
background-repeat:repeat-x;
background-position:bottom;
z-index:170;
height:40px;
}
//html-koden
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" />
<title>Tillsammans</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div style ="position:absolute; left:17px; top:-1px ; width: 100px;
z-index: 2; height: 80px; color:White;">
<a href="http://www.iogt.se/" title="Besök IOGT-NTO:s webbplats"
target="_blank"><img id="Img1" src="Bild/iogt_logga1.png" alt="Besök IOGT-
NTO:s webbplats" border="0" runat="server" /></a>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer lankar"style=" position:absolute; left:0px; bottom:0px; width:100%;">
<div style="position:absolute; left:43%; bottom:30%;">
<a href ='mailto:info@saw.se?subject=Från%20Tillsammans%3as%20
hemsida'>Webbdesign Benni Svensson</a>
</div>
</div>
</form>
</body>
</html>
Det som jag är ute efer är fortfarande fel. Det är inehållet i "content" som
jag skulle vilja ha mera flytande, så att den blå underkanten alltid syns med
ca: 5mm. Är detta möjligt? :q
Danne VMedlem sedan aug. 20068 090 inlägg
saw skrev:
Jag har nu gjort en ny i visual studio och enbart tagit med det viktigaste.
//css
html {height:100%}
body
{
background-image:url('../Bild/Footer.png');
background-repeat:repeat-x;
background-color:#6E92B3;
font: 11px/1.4em Comic Sans MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:0;
margin:10px 10px 10px 10px
position:absolute;
top:0;
left:0;
width:97%;
height:98%;
overflow:hidden;
}
#content
{
position:relative;
margin:auto auto auto auto;
top:70px;
bottom:10px;
width:90%;
min-width:950px;
height:90%;
min-height:580px;
overflow:hidden;
background-color: White;
border-left:3px solid #2E5881;
border-right:3px solid #ADC2D6;
border-top:3px solid #2E5881;
border-bottom:3px solid #ADC2D6;
}
.header
{
height:70px;
position:absolute;
top:0px;
left:15%;
width:100%;
background-image:url('../Bild/Logga.png');
background-repeat: no-repeat;
z-index:110;
}
.footer
{
position:relative; bottom:0px;
background-image:url('../Bild/Footer_small.png');
background-repeat:repeat-x;
background-position:bottom;
z-index:170;
height:40px;
}
//html-koden
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Style/StyleSheet.css" rel="stylesheet" type="text/css" />
<title>Tillsammans</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="header">
<div style ="position:absolute; left:17px; top:-1px ; width: 100px;
z-index: 2; height: 80px; color:White;">
<a href="http://www.iogt.se/" title="Besök IOGT-NTO:s webbplats"
target="_blank"><img id="Img1" src="Bild/iogt_logga1.png" alt="Besök IOGT-
NTO:s webbplats" border="0" runat="server" /></a>
</div>
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="footer lankar"style=" position:absolute; left:0px; bottom:0px; width:100%;">
<div style="position:absolute; left:43%; bottom:30%;">
<a href ='mailto:info@saw.se?subject=Från%20Tillsammans%3as%20
hemsida'>Webbdesign Benni Svensson</a>
</div>
</div>
</form>
</body>
</html>
Det som jag är ute efer är fortfarande fel. Det är inehållet i "content" som
jag skulle vilja ha mera flytande, så att den blå underkanten alltid syns med
ca: 5mm. Är detta möjligt? :q
Ledsen att säga det, men det där är ganska kaotiskt med en mängder av konstig css. Bl.a. en massa "position:absolute" där det inte behövs (t.o.m. för body-taggen!!!???) osv och andra ganska bakvända lösningar. Och så omsluter du all kod med form-taggar, vilket ju är ganska märkligt.
Ska man jobba om det där så tar det nån timme och det har jag tyvärr inte tid med.
Danne V skrev:
Och så omsluter du all kod med form-taggar, vilket ju är ganska märkligt.
ASP.NET webforms gör detta Danne V.
sawMedlem sedan mars 20011 880 inlägg Jo jag såg nu att jag hade position i body och i footer som jag nu har tagit bort.
Fungerar lika bra utan dem, men resultatet är detsamma.
Mitt tips är: Gör om CSS:en känns som du har gjort det extremt mycket krångligare än vad det behöver vara.
Kan du ladda upp bilderna du har i CSS:en? Så man vet vad man har att jobba med.
