So excuse my being very new and inexperienced in this, the answer is probably obvious.
For some reason the text in the "main-content" div in my layout (which will be the body) looks like its adding padding or something on the left, but I don't have any in the css. The container is the correct width and placement on the page, but all of the text in it starts 200px or so in, like every line has an indent.
I'm not sure why? Anyone have any idea? It's #main-content that is acting up, but I've included all of the code (minus the writing inside each section) in case it could be affecting it. I know, I know, I'm clueless. I'd just like it to be 1200px wide like the bg in #masthead, text filling the whole area.
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #FFFFFF;
background-color: #333333;
padding: 0px;
margin: 0px;}
#container {
background-color: #333333;
width: 1200px;
margin: 10px auto 10px auto;}
#masthead {
background-position: center;
height: 500px;
width: 1200px;
background-image: url('banner.jpg');
background-color: #ffffff;
background-repeat: no-repeat;}
#left-nav {
text-align: left;
position: relative;
top: -400px;
margin: 20px 0px 10px 0px;
width: 180px;
float: left;
border: 2px solid #000000;
color: #FFFFFF;
font-family: corbel, helvetica, arial;
font-size: 14px;
font-weight: normal;
height: auto;
line-height: 11px;
text-shadow: 0 0 3px #8D6D6F;
background-color: #333333;
left: 20px;
opacity: 0.8;
filter: Alpha(opacity=80); /* IE8 and earlier */;
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:5px;}
#main-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
width:1200px;}
#right-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
width:200px;}
#footer {
border-top: 2px solid #006600;
clear: both;
padding: 10px 0 px;
text-align: center;}
#top-nav ul {
text-align: center;
list-style-type: none;
margin: 0px;
padding: 0px;}
#top-nav ul li {
opacity: 1.0;
display: inline;}
#top-nav ul li a {
color: #000000;
font-family: Impact, Charcoal, sans-serif;
background-color: #CCCCCC;
padding: .2em 1em .2em 1em;
opacity: 1;
filter: Alpha(opacity=100); /* IE8 and earlier */;}
#top-nav ul li a:hover {
border-color: 99BF99;
color: #000000;
background-color: CCFFCC;
border-width: 1px;
border-style: solid;}
h1 {
font: 30px Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;}
And here's the html:
<!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>
<title></title>
<link href="mycss.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="container">
<div id="masthead"></div>
<div id="top-nav"></div>
<div id="left-nav"></div>
</div>
<div id="main-content"></div>
<div id="footer"></div>
</body>
</html>
Update: I added clear:both to main-content, which fixes the text positioning issue. However, now the whole main-content div shifts down a few inches. Any ideas on that?
Here's a jsFiddle:
http://jsfiddle.net/r7yCa/
I've replicated your issue and believe you need to add
clear: both;
to your #main-content within the css:
#main-content {
background-color: #666666;
font-family: "Palatino Linotype";
margin:auto;
clear: both;
width:1200px;}
Related
I have create a website using asp.net and when I render the the website on firefox and IE the website look the same and when rendering it on Chrome it move the button lower and changes the location of it
this is my master page code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="UMSite.master.cs" Inherits="WebApplication4.UMSiteMaster" %>
<!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">
<title></title>
<link href="~/Styles/UM.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="Form1" runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1><img alt="" src="Styles/UMHeader.png" width= "950" height= "65" /></h1>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Home.aspx" Text="Home"/>
</Items>
</asp:Menu>
</div>
</div>
</div></h1>
<div class="main" runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</form>
</body>
</html>
the below is the css
/* DEFAULTS
----------------------------------------------------------*/
body
{
background: #b6b7bc;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
padding: 0px;
color: #696969;
height: 192px;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin-bottom: 10px;
line-height: 1.6em;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
font-size: 1.5em;
color: #666666;
font-variant: small-caps;
text-transform: none;
font-weight: 200;
margin-bottom: 0px;
}
h1
{
font-size: 1.6em;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2
{
font-size: 1.5em;
font-weight: 600;
}
h3
{
font-size: 1.2em;
}
h4
{
font-size: 1.1em;
}
h5, h6
{
font-size: 1em;
}
/* this rule styles <h1> and <h2> tags that are the
first child of the left and right table columns */
.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2
{
margin-top: 0px;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
.page
{
width: 950px;
height:auto;
background-color: #fff;
margin: 10px auto 5px auto;
border: 1px solid #496077;
}
.header
{
position:relative;
margin: 0px;
padding: 0px;
background: #E30613;
width: 100%;
top: 0px;
left: 0px;
height: 90px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 0px;
color: #E30613;
border: none;
line-height: 2em;
font-size: 2em;
}
.main
{
padding: 0px 12px;
margin: 0px 0px 0px 0px;
min-height: 630px;
width:auto;
background-image:url('UMBackground.png');
}
.leftCol
{
padding: 6px 0px;
margin: 0px 0px 0px 0px;
width: 200px;
min-height: 200px;
width:auto;
}
.footer
{
color: #4e5766;
padding: 0px 0px 0px 0px;
margin: 0px auto;
text-align: center;
line-height: normal;
}
/* TAB MENU
----------------------------------------------------------*/
div.hideSkiplink
{
background-color:#E30613;
width: 950px;
height: 35px;
margin-top: 0px;
}
div.menu
{
padding: 1px 0px 1px 2px;
}
div.menu ul
{
list-style: none;
margin: 0px;
padding: 5px;
width: auto;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #E30613;
border: 1.25px #00BFFF solid;
color: #F5FFFA;
display:inline;
line-height: 1.35em;
padding: 10px 30px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #000000;
color: #F5FFFA;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #E30613;
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;
}
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: 947px;
height: 132px;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: White;
}
.loginDisplay a:link
{
color: white;
}
.loginDisplay a:visited
{
color: white;
}
.loginDisplay a:hover
{
color: white;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
This is just the way webkit browsers (safari and chrome, etc) render the html file input type.
See this jsbin for an example of the file input tag.
See HTML input type="file" in Chrome does not show textbox for a previous answer.
I'd tell you to look up "css/html browser fixes". Different browsers show webpages differently. Internet Explorer is often the browser with the biggest visual differences.
Of course the page will look different on different browsers.
You have body {font-size: .80em;} and the em is a relative size, which means that the font size on the web page is 80% of the browser's default font size.
Since the browser's default size can vary (it is always user selectable) this means that you can't use this method if you aim for browser interoperability. Ditto with the line height.
Either keep the user's preferences (and accept that different users will see different things), or choose a font size in pixels or points.
Note that if you have set a size this way in the body, you can use em elsewhere, which will then be relative to this body size. So things like h3 {font-size:1.2em} are perfectly OK.
I am trying to learn how to use templates in Web pages. Thanks to something I found on stackoverflow, I have the basics going. Now I want some control over the formatting. I found an example which looks nice so I thought I would use it to learn something. I'll show 2 images so the problem will be clear:
I don't really care about the form itself. It just serves as an example to learn something. There are a couple of things I would like to control over:
1) Notice in the original that the Company Name is placed nicely with respect to the jpeg image. In my case it is stuck to the left.
2) In the original if I expand the Firefox window the form stays centered and there is white space on both sides. In my case the Primefaces controls take the whole window and they are too high, cutting off part of the jpeg image.
I saw the original uses style.css so I tried to copy and paste different items, but nothing gave me the control I'm looking for. I'll show the only thing in style.css which makes any difference:
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
This is the beginning of the original form
<!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>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Xhtml18</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header-wrapper">
<div id="header">
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<div id="menu">
<ul>
<li class="current_page_item">Homepage</li>
<li>ABOUT US</li>
<li>SERVICES</li>
<li>SUPPORT</li>
<li>CONTACT</li>
</ul>
</div>
</div>
</div>
I tried putting in all the inner definitions, but they made no difference. I have my version much simpler
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Master template</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</h:head>
<h:body>
<div id="logo">
<h1>Company <span>Name</span></h1>
<p>Nice Slogan Goes Here</p>
</div>
<ui:insert name="AreaOne">Default text</ui:insert>
</h:body>
</html>
Finally in my xhtml file the crucial step which allows me to do the templating
<h:body>
<ui:composition template="master.xhtml">
<ui:define name="AreaOne">
So that the major point of templating seems to be working, just I need some more control over it. Sorry for the long message but I think I need it all to explain the problem.
EDIT:
I don't know how to add a file per se, so I'll spell it out as code
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
h1, h2, h3 {
margin: 0;
padding: 0;
font-weight: normal;
color: #000;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 2.8em;
}
h3 {
font-size: 1.6em;
}
p, ul, ol {
margin-top: 0;
line-height: 180%;
}
ul, ol {
}
a {
text-decoration: none;
color: #419725;
}
a:hover {
}
#wrapper {
margin: 0 auto;
padding: 0;
}
/* Header */
#header-wrapper {
height: 234px;
}
#header {
width: 950px;
margin: 0 auto;
padding: 0px 0px 0px 30px;
}
/* Logo */
#logo {
float: left;
width: 500px;
margin: 0px;
padding: 30px 0px 0px 60px;
color: #f7f7f7;
}
#logo h1, #logo p {
}
#logo h1 {
padding: 0px 0px 0px 0px;
letter-spacing: -1px;
font-size: 3.8em;
background: redc;
}
#logo h1 span {
color: #efc527;
}
#logo p {
margin: 0;
padding: 0px 0px 0px 0px;
font-size: 16px;
color: #fff;
}
#logo a {
border: none;
background: none;
text-decoration: none;
color: #f7f7f7;
}
/* Search */
#search {
float: left;
width: 280px;
height: 40px;
padding: 0px;
}
#search form {
height: 40px;
margin: 0;
padding: 0px 0 0 10px;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search-text {
width: 170px;
padding: 6px 5px 2px 5px;
border: 1px solid #DEDEDE;
background: #FFFFFF;
text-transform: lowercase;
font: normal 11px Arial, Helvetica, sans-serif;
color: #5D781D;
}
#search-submit {
width: 50px;
height: 22px;
border: none;
background: #e4e4e4;
color: #171d21;
}
/* Menu */
#menu {
float: right;
width: 950px;
height: 50px;
margin: 0 auto;
padding: 0;
}
#menu ul {
float: left;
margin: 0;
padding: 74px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
}
#menu a {
display: block;
margin-right: 1px;
padding: 16px 20px 15px 20px;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #fff;
border: none;
}
#menu a:hover, #menu .current_page_item a {
background: #131618;
text-decoration: none;
color: #FFFFFF;
}
#menu .current_page_item a {
}
/* Page */
#page {
width: 990px;
margin: 0 auto;
padding: 0px 0px 0px 0px;
background: url(images/img03.jpg) repeat-y left top;
}
#page-bgtop {
padding: 40px 0px 20px 0px;
background: url(images/img02.jpg) no-repeat left top;
}
/* Content */
#content {
float: left;
width: 720px;
padding: 0px 0px 0px 0px;
}
.post {
margin-bottom: 40px;
border-bottom: 1px dotted #E7E2DC;
margin-right: 10px;
}
.post .title {
height: 41px;
padding: 7px 0px 0px 30px;
letter-spacing: -.5px;
}
.post .title a {
border: none;
color: #000;
}
.post .meta {
margin-bottom: 30px;
padding: 0px 30px 0px 30px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: bold;
font-style: italic;
}
.post .meta .date {
float: left;
}
.post .meta .posted {
float: right;
}
.post .meta a {
}
.post .entry {
padding: 0px 30px 20px 30px;
padding-bottom: 20px;
text-align: justify;
}
.links {
padding-top: 20px;
font-size: 12px;
font-weight: bold;
}
/* Sidebar */
#sidebar {
float: right;
width: 240px;
margin: 0px;
padding: 0px 20px 0px 10px;
color: #fff;
}
#sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
#sidebar li {
margin: 0;
padding: 0;
}
#sidebar li ul {
margin: 0px 0px;
padding-bottom: 30px;
}
#sidebar li li {
line-height: 35px;
border-bottom: 1px dotted #E7E2DC;
margin: 0px 30px;
border-left: none;
}
#sidebar li li span {
display: block;
margin-top: -20px;
padding: 0;
font-size: 11px;
font-style: italic;
}
#sidebar li li a {
padding: 0px 0px 0px 15px;
}
#sidebar h2 {
height: 38px;
padding-left: 30px;
letter-spacing: -.5px;
font-size: 1.8em;
color: #fff;
}
#sidebar p {
margin: 0 0px;
padding: 0px 30px 20px 30px;
text-align: justify;
}
#sidebar a {
border: none;
color: #efc527;
}
#sidebar a:hover {
text-decoration: underline;
}
/* Calendar */
#calendar {
}
#calendar_wrap {
padding: 20px;
}
#calendar table {
width: 100%;
}
#calendar tbody td {
text-align: center;
}
#calendar #next {
text-align: right;
}
/* Footer */
#footer {
height: 50px;
margin: 0 auto;
padding: 0px 0 30px 0;
font-family: Arial, Helvetica, sans-serif;
border-top: 5px solid #4ac221;
width: 990px;
background: #262626;
}
#footer p {
margin: 0;
padding-top: 40px;
line-height: normal;
font-size: 9px;
text-transform: uppercase;
text-align: center;
color: #fff;
}
#footer a {
color: #fff;
}
Your brackground has the center attribute, that's why you've got your logo on the center and the text is not on it.
body {
margin: 0;
padding: 0;
background: #fff url(images/header.jpg) no-repeat center top;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #7c7c7c;
}
You can remove the center attribute or you can move the text by doing something like that (just an example!)
<div align="center"><h1>Company <span>Name</span></h1></div>
Then, to stop your primefaces' components to autoresize, you've got to override the default css.
I guess that you're using a PanelGrid, so you can try with
<p:panelGrid columns="2" style="width: 200px !important">....</p:panelGrid>
I'm not sure that !important is required, but basically you've got to give a fixed width to the component to stop it from auto-resizing
EDIT:
If you want to apply your style to every p:panelGrid component, you should consider overriding the whole css class.
Just take a look here to know the css class names of each primefaces component :
http://primefaces.googlecode.com/files/primefaces_users_guide_3_2.pdf
I'm new to css, I have a top nav but I couldn't set its width. It seems different when I test with Dreamweaver, ie9, ie6, Firefox and Opera. Here's my code:
#charset "utf-8";
/* CSS Document */
html {
background: url(images/light-tile.gif) repeat;
}
body {
overflow: auto;
width: 54.35em;
margin: 0 auto;
background-color: #fff;
padding-left: 0.25em;
padding-right: 0.4em;
border: 0.07em solid #97b4e0;
overflow: visible;
}
#main {
background-color: #fff;
}
ul#top-nav {
list-style: none;
margin: .9em .9em .9em 0;
padding: 0;
width: 110%;
}
ul#top-nav li {
display: inline;
}
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
ul#top-nav li a:hover {
color: #000;
font-weight: bolder;
background: #D7EBFF;
border-bottom: 0.2em solid #e9e9e9;
}
...
<body>
<div id="main">
<div id="top-info">Kumcuğaz Köyü İlköğretim Okulu</div>
<img id="top-image" src="../images/top_image.png" alt="üst resim" width="869" height="159" />
<ul id="top-nav">
<li>ANASAYFA</li>
<li>GALERİ</li>
<li>PERSONEL</li>
<li>İLETİŞİM</li>
<li>ZİYARETÇİ DEFTERİ</li>
</ul>
<div class="clear"></div>
<div id="faux">
...
If it isn't possible it to view same on all browsers, I'll have to use a table. Thanks for helping.
Sincerely
What's the reason for making it 110% wide? That's wider than the window. Also, you have 5 menu items each set to 18.5% wide... that adds up to only 90.5% total.
What happens when you make it 100% wide and each of the 5 items is 20% wide?
http://jsfiddle.net/u78Ks/2/
It looks like this might be the issue
width: 18.5%; /* for 5 items */
in here
ul#top-nav li a {
text-decoration: none;
font-size: 0.75em;
font-family: Arial, Helvetica, sans-serif;
padding: 0.90em 0;
width: 18.5%; /* for 5 items */
background: #99CCFF;
color: #3F4037;
font-weight: bold;
float: left;
display: inline-block;
text-align: center;
border-right: 0.05em solid #fff;
border-left: 0.05em solid #fff;
border-bottom: 0.2em solid #97b4e0;
}
Browsers could be interpreting this differently based on the font sizes, window sizes, etc.
Try setting this to a static width in pixels.
I've been working on this for a while and can't seem to solve the problem myself or find an answer anywhere.
Basically whats happening is, I have a vertical Navigation bar all the way to the left of my image so instead of the image being centered from the completely left side of the browser window to the right side, It gets centered from the right side of the navigation bar to the right side of the browser window. This throws it off with my title "desertshore" and my page content, which are both actually centered.
Is there a way that I can make it see pass the Nav bar and center itself around the browser window?
here is the code:
<html>
<head>
<title>dir</title>
<style type="text/css">
body {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
background-image: url('.jpg');
background-position:center;
background-size:50em;
background-repeat:no-repeat;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
title {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
background-image: url('.jpg');
background-position:center;
background-size:50em;
background-repeat:no-repeat;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
div#container {
width:100px;
background:#FFF;
height:auto;
overflow:auto;
border: 1px solid black;
border-left:0;
float:left;
}
div#site_title {
color:#00ffff;
text-transform: lowercase;
font-weight: ;
font-size: 35px;
line-height: 15px;
margin: 0 0 0 0px;
}
div#site_title2 {
color:#00ffff;
text-transform: uppercase;
font-weight: bold;
font-size: 17px;
line-height: 15px;
margin: 0 0 0 0px;
}
#menu ul{
list-style-type: none;
padding: 0;
margin-left: 0;
}
div#menu li a
{
background:#fff
border:1px solid #fff;
margin: 0;
padding: 0;
display: block;
}
-googlechromefix-
div#menu li:hover a {
background:#00ffff;
color:#FFFFFF;
border:1px solid #fff;
margin: 0;
padding: 0;
display: block;
}
div#menu ul a
{
text-decoration: none;
color: #333;
}
div#menu ul a:hover
{
background:#00ffff;
color:#FFFFFF;
font-weight:bold
}
div#page_content {
font-family: "Arial", "Helvetica", "Helvetica Neue";
font-size: 14px;
margin: 30px 0px 0 0;
text-align: left;
color: #333;
}
.color01 {
color:
}
#desertshoredom2 {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
border: 1px solid red;
}
div#container2 {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="site_title">
<center><span> △▲desertshore▲△</span></center>
<div id="site_title2">
<span>directory</span>
</div>
</div>
<div id="container">
<div id="menu">
<ul>
<li><span class="color01">Happy Anniversary</span> </li>
<p><li><span class="color01">Downloads</span></li </p>
<p><li><span class="color01">About</span></li></p>
<p><li><span class="color01">Ask</span></li></p>
</ul>
</div>
</div>
<p><img id="desertshoredom2" src="desertshoredom2.jpg"/></p>
<div id="container2">
<h1>+++test+++ Test +++test+++</h1>
<p> idreamed idreamed</p>
</div>
</body>
Thanks a lot for helping me, This seems like something really simple that I'm not doing, however my experience in HTML/CSS is extremely elementary.
You just need to update the following CSS Block to add position:absolute;
DEMO: http://jsfiddle.net/Jaybles/pzuRp/
div#container {
width:100px;
background:#FFF;
height:auto;
overflow:auto;
border: 1px solid black;
border-left:0;
float:left;
position:absolute;
}
I succeeded in centering my divs on my webpage, but I can't figure out how to align seperate div's under each other?(when still centered).
It's a blog, so when I add something, the div beneath the "blog"-div should move automatically. (margin is thus not a solution)
Greetings
.blog {
background: transparent;
height: 1200;
border-radius: 5px;
border: solid -4px #a19a9a;
width: 700px;
left: 50%;
margin-left: -350px;
position: absolute;
margin-top: -30px;
padding-bottom: 50px;
}
same code for the other div.
The "container":
#content{
width: 750px;
margin-top: 65px;
text-align: left;
height: 9000px;
overflow-x: hidden;
}
For all the code: http://www.janwillemlibeer.be/verticaal
well there is tens of methods to do such thing.. but not all might work in your example.. Its much easier to find out which one if you provide some code.
I would use such solution, group up all of the blog divs in a container.
part of index.html
<div class="container">
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
<div class="blogdiv"><!-- content of blog here --></div>
</div>
styles.css
.container {
width: 200px;
margin:0 auto;
}
.blogdiv {
width: 200px;
min-height: 20px;
clear: both;
border: 1px solid #ddd;
margin: 3px;
background-color: #f6f6f6;
}
go here for the example ---> http://jsfiddle.net/2WJm7/
but as I have said... there is a lot of methods to achieve this result but not all might work for you until you show us the code
EDIT:
ok so first of all You should not put some crazy height values... if you put min height: 20px; it will auto resize your div if the content is too big...
if you want to center the content just use margin:0 auto;
remove position: absolute; so it lets the second blog div to go under.
Overflow-x is pointless in this example as well. here is code which i changed:
css
.blog {
background: transparent;
border-radius: 5px;
border: 4px solid #a19a9a;
width: 700px;
margin: 0 auto;
margin-top: 30px;
clear:both;
}
#content{
width: 750px;
margin-top: 65px;
text-align: left;
min-height: 20px;
}
html
<div class="content">
<div class="blog">asudhasbdjsabdaushdusab saudhsab dsuadh sauhd iusahd bsabd sadjsa ub d</div>
<div class="blog">sadsad sasdas frw</div>
<div class="blog">suadguiasgduiasb gasyudh shavduis auydb iuasbvd unqwhbv ub ihbiusbvduib bni busib ub iubyu buih bviun buyvb ou vuqiw</div>
<div class="blog">yauhdiuasbduasndbasubdas</div>
<div class="blog">test</div>
</div>
edit:
Your CSS fixed
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, big, cite, code, em, font, img, small, strong, ol, ul, li, fieldset, form, label, legend {
border: 0 none;
margin: 0;
outline: 0 none;
padding: 0;
}
#font-face {
font-family: "Dincond";
font-style: normal;
font-weight: normal;
src: url("fonts/dincond-bold-webfont.eot?") format("eot"), url("fonts/dincond-bold-webfont.woff") format("woff"), url("fonts/dincond-bold-webfont.ttf") format("truetype"), url("fonts/dincond-bold-webfont.svg#webfontabKpQmB0") format("svg");
}
#font-face {
}
#content {
float: none;
padding-top: 65px;
text-align: left;
width: 750px;
margin: 0 auto;
}
body {
background: url("images/bkg.jpg") repeat fixed center center transparent;
font-family: Georgia,"Lucida Sans","Lucida Sans Unicode","Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
margin: 0;
padding: 0;
}
#blog p {
color: black;
font-family: Lucida Grande;
font-size: 13px;
line-height: 130%;
padding-left: 0;
}
#blog a {
color: #1277A6;
font-size: 13px;
font-weight: bold;
text-decoration: none;
}
#blog a:hover {
text-decoration: underline;
}
h2 {
color: #1277A6;
font-family: Dincond;
font-size: 35px;
font-weight: 400;
padding: 0 0 10px;
}
h3 {
color: #990000;
font-family: Dincond;
font-size: 23px;
font-weight: 400;
}
#menu p {
color: #4D4B4B;
font-family: Dincond;
font-size: 31px;
}
.blog, .contact {
-moz-border-bottom-colors: none;
-moz-border-image: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
background: none repeat scroll 0 0 white;
border-color: #E5E5E5 #DBDBDB #D2D2D2;
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 1px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
clear: both;
display: block;
padding-bottom: 50px;
width: 700px;
margin: 0 auto;
}
#begin {
border-bottom: 2px dashed #A19A9A;
margin-left: 50px;
margin-right: 50px;
padding-bottom: 20px;
padding-top: 10px;
width: auto;
}