<body>
<div id="naslov">
<img src="image/Conto_logo.png" title="Conto Regis" alt="contologo" />
</div>
<div id="izbornik">
<div id="home">
</div>
</div>
</body>
body {
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:1.0em;
font-weight:100;
margin:0px;
color:#000;
}
div#naslov {
height: 128px;
width: 100%;
background-image: url(../image/Header.png);
background-repeat: repeat-x;
}
div#naslov > img {
cursor:pointer;
height: 80px;
margin:20px 0px 0px 20px;
}
div#izbornik {
width:100%;
height: 45px;
background-image: url(../image/izbornik.png);
background-repeat: repeat-x;
}
#home{
height:27px;
width:28px;
border:#000 1px dashed;
}
I'm having problem positioning div "home" inside div "izbornik" when I use margin-top to pull div "home" a bit down something strange happens. Dreamweaver displays it fine while IE10 and Chrome(latest) display it as if I used margin-top inside div "izbornik". Funny thing is if set div "home" to float:left margin starts acting normal but I'm not sure why, I'll be using some javascript later when the template is completed and I need the page to be very very stable. Any suggestions?
http://jsfiddle.net/xNrGR/6/ => in short why does that 8px gap appear there? I need the div "home" to go down not the whole parent-child combo
Add overflow:auto to #izbornik. Seems to be a collapsing margins issue.
div#izbornik {
width:100%;
height: 45px;
background: red;
background-repeat: repeat-x;
overflow:auto;
}
jsFiddle example
This is collapsing margins. You can fix this by setting overflow: auto or overflow: hidden to the parent div. This can cause issue for some users depending on the content you have.
The other option is to give the parent div a border. If you make the border the sam color as the background it would not be noticeable. When people use 1px border they normally use margin -1px too. These are just some ways of tackling the problem.
DEMO http://jsfiddle.net/kevinPHPkevin/xNrGR/9/
border: thin solid red;
Related
I need to insert text in the upper and lower of an inner border (both centred) which will have a background image behind it. This will be the same on each page. Can I achieve this using CSS?
Please see screenshot of what I mean:
The border needs to be 3px in width and white in colour and the font is Basis Grotesque Medium.
I'm hoping to start out with a WordPress theme and edit it.
Hopefully this question hasn't been answered before anywhere. I tried running a search but couldn't find what I needed.
Before I go ahead and start building this website could you tell me if this is possible and how I may go about achieving it?
You can use the approach I described here Line separator under text and transparent background for the lines on the left/right of the titles.
You can then use negative top/bottom margin to position them on the bottom and top borders :
#import url(http://fonts.googleapis.com/css?family=Open+Sans:300);
body {
background-image: url(http://fr.playstation.com/media/5ZfqPjVF/BigSkyInfinity_Hero_EN.JPG);
background-repeat: no-repeat;
background-size: cover;
font-family: 'Open Sans', sans-serif;
color:#fff;
}
#content{
border:3px solid #fff;
border-width:0 3px;
display:inline-block;
margin:50px 0;
width:100%;
}
.divider {
font-size:30px;
margin: -0.65em auto -0.45em;
overflow: hidden;
text-align: center;
line-height: 1.2em;
}
.divider:before,
.divider:after {
content: "";
vertical-align: top;
display: inline-block;
width: 50%;
height: 0.65em;
border-bottom: 3px solid #fff;
margin: 0 2% 0 -55%;
}
.divider:after {
margin: 0 -55% 0 2%;
}
p{margin: 150px 0;}
<div id="content">
<h1 class="divider">Top title</h1>
<p>...Content here...</p>
<h2 class="divider">Bottom title</h2>
</div>
Note that top/bottom negative margins will need tweaking according to the font-family you are using
I'm trying to align a 'div' attribute to the center of the page (horizontally). The problem is that whatever attributes I've used, the 'div' continues to be aligned to left. The 'div' which I am reffering to, is the page 'div' of the webpage, which is inside the 'html' and the 'body' attributes. Here's the CSS code:
#page{
margin-top:20px;
margin-bottom:20px;
margin-left: auto;
margin-right:auto;
border-color: black;
border-style: solid;
border-width: thin;
overflow:auto;
padding-bottom: 10px;
padding-top: 0px;
width:1200px;
background-color:#ffffff;
font-family:Arial, Helvetica, sans-serif;
color:black;
font-size:12px;
height:700px;
}
and the 'html', 'body' CSS code is the following:
html,body {
background-color:#FFFFFF;
margin-left: auto;
margin-right: auto;
}
Note that if I remove the "overflow" property, the div is aligned to the center of the page (although, it overlays the menu which is on top of it) but I need the "overflow" property to automatically add scrollbars if the width/height of the page which would be displayed inside this div is greater than those specified in the CSS.
I haven't coded anything in awhile, however normally when I am creating a centered page:
html, body { width: 100%; height: 100%; margin: 0 auto; text-align: center; }
Then for the div:
#page { width: 900px; overflow: hidden; text-align: left; margin: 20px 0 20px 0; }
That may or may not work, like I said, it has been awhile.
In order to margin:auto works in your case is required to have a defined width/height for your main containers which are HTML and BODY
IMPORTANT:Both HTML and BODY elements must be ruled with the width/height properties
Do as follows
html,body {
background-color:#FFFFFF;
width:100%;
height:100%;
}
and watch this fiddle
It seems your div is filling full screen width. So center alignment will not have any visible effect on the div. Try to use a span instead.
Following will NOT work
<body style="text-align:center">
<div>Foo</div>
</body>
Following should work
<div style="text-align:center">
<span>Foo</span>
</body>
<div style="margin:0px auto;">sfsfsafafas</div>
Use this code surely it will make the div to center.
Simple:
HTML
<div id="page"></div>
CSS
#page {
width: 350px; height: 400px; border: 1px solid #000; margin: auto
}
jsFiddle example
You might also look at the "left" and "right" attributes for centering a if you are trying to center horizontally.
For instance, if your width was 60% of the page (width:60%), you could set (left:20%) and (right:20%) which MAY center it, however that depends on how your div is positioned. (position:absolute) or (position:relative).
(position:absolute) with the above width, left, and right should center horizontally.
There is also <center> enter code </center> within HTML that has worked for me in the past.
I'm not a guru with this though, so I don't know what "best practice" to use in your case.
I was surfing at this iA Blog post the other day and tried to figure out how did they do the dots as separator around the date.
I looked at CSS and figured out it is possible only with their own special font. Is there a way to do that without using their font? What would be some hacks without using images to do the same thing?
Screenshot below:
I had the same question once and I came up with this:
.lined{ display:table-row; width:auto; white-space:nowrap; position:relative; }
.lined:before,.lined:after {content:'';
display:table-cell;
width:50%;
position:relative;
height:20px;
background: url(http://www.xpy.gr/css/img/text-deco.png) 7px no-repeat;
}
I uses pseudo elements and some table-like functionality. It has some limitations but it will always stretch up to full width. All you have to do is change the background and add the class to the element of you choice.
DEMO: http://dabblet.com/gist/2172806
I used a negative (relative em) margin to place the header over the dotted top-border of the containing block. This should keep the code save when the font-size changes. See CodePen for an example.
You can use, say, a div with a dotted border on the top, like in this jsFiddle.
Basically you can put the text over the border (i.e. with absolute positioning) and apply a white background to it.
<div>
<p>I. JUNE 2012</p>
</div>
div {
border-top: 2px dotted #eee;
position: relative;
text-align: center;
}
p {
background: white;
position: absolute;
top: -25px;
padding: 0 10px;
}
Create an element with a dotted border, and in it center an element with a white background and a position that overflows the parent's height.
A crude example:
HTML
<div class="title_container">
<div class="title">I. June 2012</div>
</div>
CSS
.title_container {position:relative;height:20px;border-bottom:1px dotted #000;}
.title_container .title {display:table;position:relative;top:10px;left:0;right:0;margin:0 auto;padding:0 10px;background:#FFF;}
See jsFiddle demo
You could use something like this. But it's probably not very robust against font and size changes.
HTML:
<div id='container'>
<div class='dotted'>
<span>2013-03-10</span>
</div>
</div>
CSS:
#container {
width: 30em;
}
.dotted {
text-align: center;
position: relative;
top: 1em;
border-top: 1px dotted #888;
overflow-y: visible;
}
.dotted span {
display: inline-block;
position: relative;
top: -0.75em;
background: #fff;
padding: 0 1ex;
}
I have a little problem in centering elements inside a div. Although the css works fine for Google Chrome, it fails for Internet Explorer.
Say I have a div with id="contactus" and I want everything inside the div to be centred, whether it be a header, para or images. More specifically, I want a header to be centred, which is followed by an underline spanning over the 80% of the width in the div, with centre alignment. Consider this:
<div id="contactus">
<h2>CONTACTS</h2>
</div>
#contactus {
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
#contactus h2 {
margin:0 auto 0 auto;
text-align: center;
font-family:arial,sans-serif;
padding-top: 10px;
/*this is for the underline after the heading*/
width:80%;
border-bottom:1px solid gray;
}
The header and the underline remain left aligned in IE, but centre aligned in Chrome. How can I rectify that ?
Note: I am using a separate css stylesheet for IE, so the answer may be specific to IE only.
it might be because of doctype Check that you have a valid doctype
try
<!DOCTYPE html>
change like this
#contactus {
text-align:center;
margin-top: 20px;
height: 308px; /*2px for the border on both sides*/
width: 248px; /*2px for the border on both sides*/
background-color: #F0F0F0;
border: 1px solid #A9A9A9;
}
<div id="contactus" align="center">
<h2>CONTACTS</h2>
</div>
I'm trying to get h1 to appear on the left and h2 on the right, which I've managed to do thanks to a previous post on stackoverflow. But now there is this white line showing up under the text that is seriously messing with my design. Any thoughts?
<div id="container">
<div id="header">
<h1 style="text-align:left;float:left;">Ken DeRosier</h1>
<h2 style="text-align:right;float:right;">Master Sculptor</h2>
<hr style="clear:both;">
<!-- end #header -->
</div>
...
</div>
This is all the CSS I can think of that could be affecting the code above.
body {
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFFFbb;
font-family: Arial, Helvetica, sans-serif;
font-size: 100%;
background-color: #000000;
background-repeat: no-repeat;
background-position: center top;
background-image: url(../images/sunriseHeader.jpg);
}
.thrColLiqHdr #container {
width: 80%; /* this will create a container 80% of the browser width */
margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
border: 0px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
}
.thrColLiqHdr #header {
padding: 0 10px;
padding-top: 170px;
padding-right: 20px;
}
.thrColLiqHdr #header h1 {
margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
padding: 10px 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
Try replacing this line
<hr style="clear:both;">
with this
<div style="clear:both;"></div>
I think this is because you use a <hr> aka "horizontal rule". Why don't you try to use a span or a div or something else to clear which is not intended to display itself with something visible?