You have fixed your html body in fixed pixal, then you keep header and footer width 100% that is same as body's width. So, if you tride to keep your content portion width 100%. Set width:100% and float: left;. You can set hight: auto;
You have fixed your html body in fixed pixal, then you keep header and footer width 100% that is same as body's width. So, if you tride to keep your content portion width 100%. Set width:100% and float: left;. You can set hight: auto;
Can you be more precise on what I need to change (the line for example ?)
salim20001
Member
154 Points
507 Posts
CSS file
May 02, 2012 09:56 AM|LINK
Hi,
I am working with a template from the web, however I have the main page that is too wide, the menu is ok (width=100%), the footer also
Can you pleasehelp me se the page width to 100% ( I tried to change width from "auto" to "100%" but nothing changed)
Here's my style file
body { background: #fff url(images/background.gif) repeat-x center 187px; color: #585858; font-family: Arial; font-size: 14px; margin: 0; min-width: 960px; } a { outline: none; } img { border: none; } #header div#section:after, #header ul:after, #content div:after, #content div ul.services:after, #footer div:after, #footer div div.section ul:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; } #page { background: url(images/background.jpg) no-repeat center 180px; width: 100%; margin-top: 0px; } #header { background: url(images/bg-header.gif) repeat-x; height: auto; overflow: hidden; position: relative; } #header div#section { height: 145px; margin: 0 auto; width: 960px; } #header div#section div { float: left; margin-top: 48px; } #header div#section div a { display: block; } #header div#section span { color: #ACBCC9; float: right; margin: 0; padding-right: 20px; padding-top: 45px; text-align: right; width: 178px; } #header ul { list-style: none; margin: 2px auto 0; padding: 0; width: 935px; } #header ul li { float: left; padding-right: 5px; } #header ul li a { color: #28475C; display: block; font-size: 14px; height: 43px; line-height: 37px; padding: 0 23px; text-align: center; text-decoration: none; text-shadow: 1px 1px 0 #94C81D; text-transform: capitalize; } #header ul li.current, #header ul li:hover { height: 43px; } #header ul li.current a { background: url(images/bg-menu.gif) repeat-x; color: #2a495e; font-weight: bold; text-shadow: 1px 1px 0 #a8d32c; } #header ul li a:hover { background: url(images/bg-menu.gif) repeat-x; } #header div#tagline { background: url(images/bg-header2.jpg) no-repeat center -20px; margin-top: 10px; } #header div#tagline div { color: #295071; height: 435px; padding-left: 20px; margin: 0 auto; width: 940px; } #header div#tagline div h4 { font-family: Georgia, "Times New Roman",Times, serif; font-size: 50px; font-weight: bold; line-height: 70px; margin: 0; padding-top: 100px; text-shadow: 0 1px 0 #FFFFFF; width: 450px; } #header div#tagline div p { font-size: 24px; line-height: 35px; margin: 0; padding-top: 20px; text-shadow: 0 1px 1px #FFFFFF; width: 340px; } #content { background: url('images/bg-content.gif') no-repeat center top; margin: 0 auto; min-height: 174px; overflow: hidden; position: relative; width: 960px; top: 36px; left: 0px; height: 625px; } #content div#home { background: url('images/bg-home.gif') no-repeat center top; margin: -0 auto 0; min-height: 174px; overflow: hidden; padding: 0; position: relative; width: 960px; top: 13px; left: 0px; height: 139px; } #content p a { color: #000; text-decoration: underline; } h4 a, div#aside p span a { color: #375675; text-decoration: underline; } #content div { background: #fff; margin: 10px auto 20px; padding: 30px; width: 880px; } #content div div { margin: 0; padding: 0 0 30px; width: auto; } #content div div.first { *height: 200px; } #content div div h2 { color: #375675; font-weight: bold; padding-top: 10px; } #content div#home div { background: none; margin: 10px auto 20px; padding: 30px; width: 880px; } #content div ul.section { color: #375675; font-size: 14px; font-weight: bold; list-style: disc; margin: 10px 0 10px 20px; } #content div ul.section li { float: none; padding-bottom: 0; width: auto; } #content div ul.section li span { color: #375675; text-transform: uppercase; } #content div ul.section li p { color: #585858; font-weight: normal; line-height: 25px; margin-left: -12px; padding-bottom: 15px; padding-top: 10px; } #content div p span.first { color: #375675; display: block; font-size: 14px; font-weight: bold; padding-bottom: 10px; text-transform: uppercase; } #content div#home div div#aside, #content div#home div div#calendar { min-height: 300px; margin: 0; padding: 0; } #content div#home div div#aside { float: left; padding: 0; width: 570px; } #content div div.section div#aside { float: left; margin: 0; padding: 0; width: 560px; } #content div#home div div#aside ul { list-style: none !important; padding-left: 0 !important; padding-top: 0 !important; } #content div#home div div#aside div { margin-bottom: 40px; float: none; margin-left: 0; margin-top: 0; min-height: 0; padding: 0; width: 550px; } #content div div ul { margin: 0; } #content div h5 { color: #375675; font-size: 14px; font-weight: bold; margin: 30px 0 5px; } #content div#home div div#aside div h1, #content div h1 { color: #3f3f3f; font-size: 28px; font-weight: normal; margin: 0; padding-bottom: 27px; } #content div h3 { color: #c80708; font-size: 28px; font-weight: bold; margin: 0; padding-bottom: 27px; } #content div#home div div#aside h2 span.last, #content div h1 span.last, #content div h2 span.last { color: #c80708; padding: 0; font-weight: bold; } #content div#home div div#aside div img, #content div img { border: 1px solid #C80708; float: left; margin-right: 15px; margin-top: 8px; padding: 9px; } #content div img { margin-right: 25px; } #content div#home div div#aside div p { padding-top: 12px; } #content div#home div div#aside div p, #content div p { line-height: 25px; margin: 0; padding-bottom: 0; text-align: justify; } #content div#home div div#aside ul li { border: none; float: left; margin-right: 0; padding-bottom: 0; padding-right: 25px; padding-top: 0; width: 260px; } #content div#home div div#aside ul li:first-child { padding-left: 0; } #content div#home div div#aside ul li h2 { font-size: 20px; font-weight: normal; margin: 0; padding: 0; text-transform: none; } #content div h2 { font-size: 15px; font-weight: normal; margin: 0; padding-bottom: 15px; padding-top: 40px; text-transform: uppercase; } #content div h4 { color: #375675; font-size: 14px; font-weight: bold; line-height: 25px; margin: 0; padding-top: 20px; } #content div ul.services { list-style: disc; margin: 10px 0 0 19px; padding: 0; *padding-bottom: 20px; } #content div ul.services li { float: left; line-height: 25px; margin-right: 57px; width: 230px; } #content div div.section { float: none; margin: 20px 0 0; padding: 0; width: auto; } #content div div.calendar { float: none; margin-top: -20px; *margin-top: -30px; padding: 0 20px; width: auto; } #content div div.calendar dl { float: left; width: 278px; } #content div div.calendar dl dt { color: #375675; font-size: 14px; font-weight: bold; padding-bottom: 5px; padding-top: 20px; *padding-top: 45px; } #content div div.calendar dl dd { line-height: 25px; margin: 0; padding: 0; } #content div div.section div h4 { padding-top: 0; width: 400px; } #content div div.section div h5, #content div div.section div h6 { color: #375675; font-weight: bold; line-height: 25px; margin: 0; padding: 15px 0; text-transform: uppercase; } #content div div.section div h6 { margin: 0; padding: 0; font-size: 18px; text-indent: 20px; } #content div div.section div h5 span { color: #3F3F3F; font-weight: normal; } #content div div.section div#sidebar ul.links { list-style: disc; margin: 10px 0 0 20px; padding-top: 0; padding-left: 15px; width: auto; } #content div div.section div#sidebar ul.blog li { line-height: 15px; border: none; float: left; height: auto; padding: 0; width: auto; } #content div div.section div#sidebar ul.blog li div h2 { font-size: 14px; font-weight: bold; margin: 0; padding: 0; } #content div div.section div#sidebar ul.blog li div h2 a { line-height: 19px; text-transform: uppercase; color: #375675; text-align: left; text-decoration: none; } #content div div.section div#sidebar ul.blog li div { margin: 0; padding: 0; width: auto; } #content div div.section div#sidebar ul.blog li p { padding: 15px 0; } #content div div.section div#sidebar ul.links li { border: none; float: none; height: auto; line-height: 33px; padding: 0; width: auto; } #content div#home div div#aside ul li h2 a, #content div h2 { color: #3f3f3f; text-decoration: none; } #content div#home div div#aside ul li p { line-height: 25px; padding-top: 20px !important; padding-bottom: 0 !important; text-align: justify; margin-top:0; } #content div#home div div#calendar { float: left; margin-left: 5px; padding: 0; width: 305px; } #content div div.section div#sidebar { float: left; margin-left: 30px; margin-top: 0; padding: 0; width: 290px; } #content div div.section div#sidebar ul.blog { float: left; list-style: none; margin-top: 0; padding: 5px 0 0; width: 290px; } #content div#home div div#calendar h3 { font-size: 28px; font-weight: bold; margin: 0; } #content div#home div div#calendar h3{ color: #c80708; display: block; text-decoration: none; } #content div#home div div#calendar ul { list-style: none; padding-left: 0; padding-top: 8px; } #content div#home div div#calendar ul li { margin-right: 0; padding: 0 0 20px; width: auto; } #content div#home div div#calendar ul li div { height: 43px; margin-bottom: 0 !important; margin-left: 0 !important; margin-top: 0 !important; min-height: 0 !important; padding: 0; width: 270px !important; } #content div#home div div#calendar ul li div span, #content div div.section div#sidebar ul li div span { background: #274e75; color: #FEFEFF; float: left; font-size: 14px; font-weight: bold; margin-right: 5px; padding: 3px 5px; text-align: right; } #content div#home div div#calendar ul li div h2 { font-size: 18px; font-weight: normal; margin: 0; padding: 0; } #content div#home div div#calendar ul li div h2 a { color: #375675; display: block; line-height: 19px; text-align: left; text-decoration: none; text-transform: none; } #content div#home div div#calendar ul li p { border-bottom: 1px solid #c2c2c2; color: #5E5E5E; line-height: 25px; padding: 15px 0; text-align: justify; } #content div h3 div { border: 1px dashed red; float: left; } #footer { background: #274F75 url(images/bg-footer.gif) repeat-x; min-height: 113px; width: 100%; } #footer div { font-size: 12px; margin: 0 auto; padding-top: 37px; position: relative; width: 960px; top: 0px; left: 0px; height: 35px; } #footer div div#connect { float: left; padding: 0; width: 250px; } #footer div div#connect a { display: inline-block; padding-right: 10px; } #footer div div.section { float: right; padding: 0; width: 700px; } #footer div div.section ul { list-style: none; margin: 0; padding: 0; position: absolute; right: -250px; top: -4px; width: 660px; left: 290px; height: 17px; } #footer div div.section ul li { border-left: 1px solid #6886a0; float: left; padding: 0 5px; } #footer div div.section ul li.last { height: 10px; width: 62px; border-right-style: none; border-right-color: inherit; border-right-width: 0; } #footer div div.section ul li:first-child { border: none; } #footer div div.section ul li a { color: #6886A0; display: block; height: 12px; line-height: 10px; text-decoration: none; } #footer div div.section ul li a:hover { color: #fff; } #footer div div.section p { color: #6886A0; margin: 0; padding: 20px 3px 0; text-align: right; } /* TAB MENU ----------------------------------------------------------*/ div.hideSkiplink { background-color:#214D73; width:100%; height: 44px; } div.menu { padding: 4px 0px 4px 8px; } div.menu ul { list-style: none; margin: 0px; padding: 0px; width: auto; } div.menu ul li a, div.menu ul li a:visited { background-color: #214D73; border: 1px #4e667d solid; color: #dde4ec; display: block; line-height: 1.35em; padding: 4px 20px; text-decoration: none; white-space: nowrap; } div.menu ul li a:hover { background-color: #bfcbd6; color: #465c71; text-decoration: none; } div.menu ul li a:active { background-color: #465c71; color: #cfdbe6; text-decoration: none; } /* FORM ELEMENTS ----------------------------------------------------------*/ fieldset { margin: 1em 0px; padding: 1em; border: 1px solid #ccc; } fieldset p { margin: 2px 12px 10px 10px; } fieldset.login label, fieldset.register label, fieldset.changePassword label { display: block; margin-top: 0px; } fieldset label.inline { display: inline; } legend { font-size: 1.1em; font-weight: 600; padding: 2px 4px 8px 4px; } input.textEntry { width: 320px; border: 1px solid #ccc; } input.passwordEntry { width: 320px; border: 1px solid #ccc; } div.accountInfo { width: 42%; } /* MISC ----------------------------------------------------------*/ .clear { clear: both; } .title { display: block; float: left; text-align: left; width: 961px; height: 95px; } .loginDisplay { font-size: 1.1em; display: block; text-align: right; padding: 10px; color: White; height: 17px; } .loginDisplay a:link { color: white; } .loginDisplay a:visited { color: white; } .loginDisplay a:hover { color: white; } .failureNotification { font-size: 1.2em; color: Red; margin-bottom: 2px; } .bold { font-weight: bold; } .submitButton { text-align: right; padding-right: 10px; }patuary
Member
425 Points
143 Posts
Re: CSS file
May 02, 2012 10:12 AM|LINK
pls provide ur html code.
salim20001
Member
154 Points
507 Posts
Re: CSS file
May 02, 2012 10:21 AM|LINK
Her's the master page :
<%@ Master Language="VB" AutoEventWireup="false" CodeFile="Site.Master.vb" Inherits="Site" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!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" xml:lang="en"> <head runat="server"> <script type="text/javascript" src="Scripts/jquery.js"></script> <script type="text/javascript" src="Scripts/menu.js"></script> <meta charset="UTF-8" /> <title>Home </title> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if IE 6]> <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]--> <asp:ContentPlaceHolder ID="HeadContent" runat="server"> </asp:ContentPlaceHolder> <style type="text/css"> .header { height: 97px; } .menu { font-size: large; } </style> </head> <body> <form runat="server"> <div class="page"> <div class="header"> <div class="title"> <a href="../Acceuil/Default.aspx"> <asp:Image ID="Image1" runat="server" Height="89px" ImageUrl="~/Images/onda_logo.bmp" style="margin-top: 0px" Width="652px" /> </a> <asp:LoginView ID="HeadLoginView" runat="server"> <AnonymousTemplate> [ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ] </AnonymousTemplate> <LoggedInTemplate> Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>! [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ] </LoggedInTemplate> </asp:LoginView> </div> </div> <div class="clear hideSkiplink"> <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" ForeColor="#000073"> <Items> <asp:MenuItem NavigateUrl="Acceuil/Default.aspx" Text="Acceuil"> <asp:MenuItem NavigateUrl="Acceuil/Contact.aspx" Text="Utilisateur"/> <asp:MenuItem NavigateUrl="Acceuil/Contact.aspx" Text="Documentation"/> <asp:MenuItem NavigateUrl="Acceuil/Contact.aspx" Text="Gestion des utilisateurs"/> </asp:MenuItem> <asp:MenuItem NavigateUrl="Equipes/Equipes.aspx" Text="Equipes"> <asp:MenuItem NavigateUrl="Equipes/Enregistrer_une_entrée.aspx" Text="Enregistrer une entrée"/> <asp:MenuItem NavigateUrl="Equipes/Ajouter_un_commentaire.aspx" Text="Ajouter un commentaire"/> <asp:MenuItem NavigateUrl="Equipes/Gestion_des_équipes.aspx" Text="Gestion des équipes"/> </asp:MenuItem> <asp:MenuItem NavigateUrl="Equipements/Equipements.aspx" Text="Equipements"> <asp:MenuItem NavigateUrl="Equipements/Equipements_réparés.aspx" Text="Equipements réparés"/> <asp:MenuItem NavigateUrl="Equipements/Ajout_équipement_HS.aspx" Text="Ajouter un équipement hors service"/> <asp:MenuItem NavigateUrl="Equipements/Ajout_intervention_corrective.aspx" Text="Ajouter une intervention corrective"/> <asp:MenuItem NavigateUrl="Equipements/Ajout_intervention_non_corrective.aspx" Text="Ajouter une intervention non corrective"/> <asp:MenuItem NavigateUrl="Equipements/Statistiques.aspx" Text="Statistiques"/> <asp:MenuItem NavigateUrl="Equipements/Gestion_équipements.aspx" Text="Gestion des équipements"/> </asp:MenuItem> <asp:MenuItem NavigateUrl="Lignes/Lignes.aspx" Text="Lignes"> <asp:MenuItem NavigateUrl="Lignes/Lignes_réparées.aspx" Text="Lignes réparées"/> <asp:MenuItem NavigateUrl="Lignes/Ajout_ligne_HS.aspx" Text="Ajouter une ligne hors service"/> <asp:MenuItem NavigateUrl="Lignes/Ajout_intervention_corrective.aspx" Text="Ajouter une intervention corrective"/> <asp:MenuItem NavigateUrl="Lignes/Ajout_intervention_non_corrective.aspx" Text="Ajouter une intervention non corrective"/> <asp:MenuItem NavigateUrl="Lignes/Statistiques.aspx" Text="Statistiques"/> <asp:MenuItem NavigateUrl="Lignes/Gestion_lignes.aspx" Text="Gestion des lignes"/> </asp:MenuItem> <asp:MenuItem NavigateUrl="Interventions/Interventions.aspx" Text="Interventions"> <asp:MenuItem NavigateUrl="Interventions/Interventions_équipements.aspx" Text="Interventions sur les équipements"/> <asp:MenuItem NavigateUrl="Interventions/Interventions_lignes.aspx" Text="Interventions sur les lignes"/> <asp:MenuItem NavigateUrl="Interventions/Instructions/Instructions.aspx" Text="Instructions"/> <asp:MenuItem NavigateUrl="Interventions/Instructions/Gestion_instructions.aspx" Text="Gestion des instructions"/> <asp:MenuItem NavigateUrl="Interventions/Planning_maintenace_préventive.aspx" Text="Planning de la maintenace préventive"/> </asp:MenuItem> <asp:MenuItem NavigateUrl="Trafic_AFTN/Lister_un_trafic.aspx" Text="Trafic AFTN"> <asp:MenuItem NavigateUrl="Trafic_AFTN/Enregistrer_un_trafic.aspx" Text="Enregistrer un trafic"/> <asp:MenuItem NavigateUrl="Trafic_AFTN/Gestion_centres.aspx" Text="Gestion des centres"/> </asp:MenuItem> <asp:MenuItem NavigateUrl="Missions/Missions.aspx" Text="Missions"> <asp:MenuItem NavigateUrl="Missions/Enregistrer_mission.aspx" Text="Enregistrer une mission à l'extérieur"/> <asp:MenuItem NavigateUrl="Missions/Gestion_centres.aspx" Text="Gestion des centres"/> </asp:MenuItem> <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Contact"> </asp:MenuItem> </Items> </asp:Menu> <div id="page"> <asp:ContentPlaceHolder ID="MainContent" runat="server"> </asp:ContentPlaceHolder> <div id="footer"> <div> <div class="section"> <ul> <li> <a href="../Acceuil/Default.aspx">Acceuil</a></li> <li><a href="http://www.onda.ma/ONDA/Fr/Accueil.htm" target="_blank"">Site Web ONDA</a></li> <li><a href="trainingcourses.html">Training Courses</a></li> <li><a href="career.html">Career</a></li> <li class="last"><a href="contactus.html">Contact Us</a></li> </ul> <p> © Pôle Navigation Aérienne. Office Nationale des Aéroports. Casablanca. </p> </div> </div> </div> </div> </div> </div> </form> </body> </html>mahedee
Member
450 Points
116 Posts
Re: CSS file
May 02, 2012 10:25 AM|LINK
You have fixed your html body in fixed pixal, then you keep header and footer width 100% that is same as body's width. So, if you tride to keep your content portion width 100%. Set width:100% and float: left;. You can set hight: auto;
Mahedee
Blog: http://mahedee.blogspot.com
salim20001
Member
154 Points
507 Posts
Re: CSS file
May 02, 2012 10:33 AM|LINK
Can you be more precise on what I need to change (the line for example ?)
thanks
patuary
Member
425 Points
143 Posts
Re: CSS file
May 02, 2012 10:52 AM|LINK
Hello Salim,
I have observed ur css style sheet. the style sheet contains some error like
#content div div.first {
*height: 200px;
}
#content div ul.services {
list-style: disc;
margin: 10px 0 0 19px;
padding: 0;
*padding-bottom: 20px;
}
#content div div.calendar {
float: none;
margin-top: -20px;
*margin-top: -30px;
padding: 0 20px;
width: auto;
}
#content div div.calendar dl dt {
color: #375675;
font-size: 14px;
font-weight: bold;
padding-bottom: 5px;
padding-top: 20px;
*padding-top: 45px;
}
remove the * from the front of statements.
there is a lot of width: 960px - statement which are orienting ur page.
Also ur html orientaion is not good. u may find some good masterpage template from web.
an error:-
<li><a href="http://www.onda.ma/ONDA/Fr/Accueil.htm" target="_blank"">Site Web ONDA</a></li>
salim20001
Member
154 Points
507 Posts
Re: CSS file
May 02, 2012 11:32 AM|LINK
Thanks,
But what's the error here ?
I want to open a website on a new Window
I changed all width wich width>900px to 100% but nothing changed. There's also some widht with "Auto", I don't know wich one is causing the problem
Do u have any masterpage template ?