I am just facing a problem,can not able to overcome(make be lack of proper identification of problem).The header of a web template is working well in 1280*800 but breaking in larger resolution monitors(1900*1440). The Header contains total three divs as bellows:
<div id="header">
<!--#LOGO#-->
<div id="logo">
<img src="<?php echo SITE_IMG?>shop-logo.png" alt="<?php echo SITE_NAME;?>">
</div>
<!--#HEADER NAVIGATION#-->
<div id="welcomeimg">
<img src="<?php echo SITE_IMG?>shop-willkommen.png" alt="">
</div>
</div> <!-- end header-->
And the css of the templates as follows:
#header {padding-bottom:0px; margin-bottom:0; background-color:#CCCCCC;background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;}
#logo
{
left:105px;
#left:-350px;
position:relative;
width:300px;
}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
}
The to div "logo" and "welconeimg" just breaking and getting out of the middle of the header(wraper).
It will be helpful for me,if ant one can solve the problem.
Thanks in advance.
Do you have a link you can show? I tried this, basically your example with the 3 divs having a special background color, that way you can see where they are going.
#header {
padding-bottom:0px;
margin-bottom:0;
#background-color:#CCCCCC;
background:url(../images/shop-header-bg.jpg);
background-repeat:no-repeat; height:100px;
background-color: red;
}
#logo
{
left:105px;
#left:-350px;
position:relative;
width:300px;
background-color:green;
}
#welcomeimg
{
float:right;
position:relative;
right:126px;
width:380px;
#top:-100px;
height:97px;
background-color: yellow;
}
">shop-logo.png" alt="">
shop-willkommen.png" alt="">
Related
Im having some trouble with a website in ie9.
The boxes should stack into individual projects like the below screenshots but in ie9 the bottom intro text area creates a separate box for itself and goes out of line...
It should look like this:
http://pagedev.co.uk/qube-issue/2.png
But its like this:
http://pagedev.co.uk/qube-issue/1.png
My html is:
<div class="projects-wrapper">
<!--Open Brief Project-->
<div class="projects-single">
<img src="<?php the_field( 'thumbnail' ); ?>">
<div class="project-intro">
<h3><?php the_field( 'project_title' ); ?><h3>
</div>
</div>
<!--Close Brief Project-->
</div>
My CSS is:
.projects-wrapper {
width:100%;
height:auto;
margin-bottom:45px;
}
.projects-single {
width:30%;
height:auto;
display:inline-block;
background-color:#ffffff;
margin-right:3%;
margin-bottom:35px;
vertical-align:top;
float:left;
}
.projects-single img {
width:100%;
height:auto;
margin-bottom:-5px;
}
.project-intro {
width:83%;
height:auto;
padding-left:8%;
padding-right:8%;
padding-top:6%;
padding-bottom:6%;
}
.project-intro h3 {
margin-bottom:0px;
font-size:15px;
}
I am struggling to figure out what i need to change to get it working in ie9
If you need anymore info let me know and ill post it up.
Any help would be great!
Lee
There is an error in your markup, your h3 element is not closed.
Corrected:
<h3><?php the_field( 'project_title' ); ?></h3>
I am new to css and trying to create a header for my webpage
The structure of the header is like
-LOGOIMAGE--link1--link2-----TITLEIMAGE(#center)-----link3--link4-
Here is the html of the header
<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo"/>
<div id="navbox1">
aaa
bbb
</div>
<img src="http://goo.gl/Uinfkp" class="title"/>
<div id="navbox2">
xxx
yyy
</div>
</div>
And this is what i have tried with css http://jsfiddle.net/WSDJ3/
I have no idea why the images and text are placed like that. Please help!
To select a class you should use . not #
# is used to select an ID
So the CSS should look like this:
.logo
{
float:left;
width:72px;
height:70px;
margin:5px 0;
}
.title
{
float:left;
width:175px;
}
You are using classes and ids (which is good). Your CSS, however, is using the # selector for both.
# is for id (think of an ID number) and . is for classes. Change it to:
#header
{
width:100%;
height:80px;
background:#232c2b;
}
.logo
{
float:left;
width:72px;
height:70px;
margin:5px 0;
}
#navbox1
{
float:left;
margin:30px 30px;
}
.title
{
float:left;
width:175px;
}
#navbox2
{
float:left;
margin:30px 30px;
}
a
{
color:white;
font-size:15px;
text-decoration:none;
margin:auto 10px;
}
For this add just float left to the image. You can choose to give an inline css as I mentioned bellow or you can do internal css or call it with external css with the help of class.
<div id="header">
<img src="http://goo.gl/Uinfkp" class="logo" style="float:left;"/>
<div id="navbox1">
aaa
bbb
</div>
<img src="http://goo.gl/Uinfkp" class="title" style="float:left;"/>
<div id="navbox2">
xxx
yyy
</div>
I just wanted to create a newsbox just by using CSS without so many IMG or TABLE crap. It works quite well but there will always appear a space between my image and the colored bar under the picture which should be directly under the picture not with some space between. Here is my code :
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<img src="img/newsbox1.jpg" width="270" height="140" border="0" />
<div class="news_box_bar"></div>
</div>
</div>
</div>
#mainbody {
margin: 0 auto;
width: 900px;
padding-top:30px;
padding-bottom:30px;
}
.news_box {
float:left;
width:288px;
height:348px;
background-color:#DDDDDD;
margin-right:5px;
margin-left:5px;
border:1px;
border-style:solid;
border-color:#BBBBBB;
}
.news_box_inside {
float:left;
margin:9px;
width:270px;
height:330px;
background-color:#FCFCFC;
}
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
}
I tried to set the margin and padding to zero for the image or trying position: or top: but somehow I can't get rid of the space. Anyone got a good solution ?
Best regards,
Kris
Add this to your CSS:
.news_box_inside > img {
display: block;
}
Example: http://jsfiddle.net/grc4/TV4zT/
Kris,
If you inspect <img> element by default it's css property display is set to inline-block, SO I suggest to apply style on <img> element and make it display:block
<img src="img/newsbox1.jpg" width="270" height="140" border="0" style="display:block" />
DEMO
Just add a margin to your newsbar as showm: DEMO
.news_box_bar {
background-color:#540000;
height:43px;
border:1px solid #892d2d;
margin-top:-5px;
}
.news_box_bar {
background-color:#540000;
margin-top:-5px;
height:43px;
border:1px solid #892d2d;
}
set this in your CSS class
use link below to see working solution for your problem
http://jsfiddle.net/v7NwR/
<div id="mainbody">
<div class="news_box">
<div class="news_box_inside">
<figure><img src="http://static.adzerk.net/Advertisers/a04d6b3e25c747f48ef794d13e765425.jpg" border="0" /></figure>
<div class="news_box_bar">sdfgsdfgsdfg</div>
</div>
</div>
</div>
css
.news_box{ float:left; border:5px #444 solid;}
figure{ font-size:0%;}
#mainbody{ color:#000;}
.news_box_bar{ background:red;}
I have an 3 images inside a div and that div is inside another div...like so
<div class="contentImages">
<div id="slideshow">
<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image2'] ?>" height="200" />
<img src="upload/<?php echo $array['image3'] ?>" height="200" />
</div>
</div>
if you goto http://www.willruppelglass.com/ you can see that its a slideshow and the images are not centered inside the div and it looks horrible...
(my original plan was to have the images attaching, but I am not sure if that is possible...is it?)
Here is the CSS for the slideshow
#slideshow {
position:relative;
height:200px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#slideshow, #slideshow2, #slideshow3 {
overflow:hidden;
float:left;
width:250px;
}
and the CSS for content Images
.contentImages{
border:1px solid #CCC;
padding:10px;
margin:20px auto 0;
position:relative;
width:750px;
overflow:hidden;
}
I hope this makes sense, this issue has been bugging me for days,
Here's a page for you: http://www.w3.org/Style/Examples/007/center
Also, I suggest you make thumbnails of the images. It takes a painfully long time to load them, and the slideshow switches multiple times before all images is loaded.
I have 3 divs inside 1 div like so..
<div class="contentImages">
<div id="slideshow">
<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image2'] ?>" height="200" />
<img src="upload/<?php echo $array['image3'] ?>" height="200" />
</div>
<div id="slideshow2">
<img src="upload/<?php echo $array['image4'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image5'] ?>" height="200" />
<img src="upload/<?php echo $array['image6'] ?>" height="200" />
</div>
<div id="slideshow3">
<img src="upload/<?php echo $array['image7'] ?>" height="200" class="active" />
<img src="upload/<?php echo $array['image8'] ?>" height="200" />
<img src="upload/<?php echo $array['image9'] ?>" height="200" />
</div>
</div>
Taken from here.
Currently the divs go underneath each other, but I am trying to get them to go side by side....any ideas?
here is the css:
#slideshow {
position:relative;
height:200px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
#slideshow2 {
position:relative;
height:200px;
}
#slideshow2 IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow2 IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow2 IMG.last-active {
z-index:9;
}
#slideshow3 {
position:relative;
height:200px;
}
#slideshow3 IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}
#slideshow3 IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow3 IMG.last-active {
z-index:9;
}
.contentImages{
border:1px solid #CCC;
padding:10px;
margin:20px auto 0;
position:relative;
width:811px;
}
Is there something I am missing here?
The reason I have 3 images per a div is because I have 3 jquery slideshows going on, one per a div. The jquery code is long, so i don't I need it for this problem.
Any help would be gratefully appreciated, thanks,
J
#contentImages {
overflow:hidden;
}
#slideshow, #slideshow2, #slideshow3 {
width:268px;
overflow:hidden;
float:left;
}
DIV are block level elements. That means they're going to stack by their default nature. You have to override this somehow. Two options would be to:
#contentImages > div { display:inline-block; }
or
#contentImages > div { float:left; }
Hope that helps.
edit
See comment below about how to support inline-block in older browsers and clearing floated containers, depending on which method you prefer.
By default, divs are styled with display: block, which makes an element take up all the horizontal space available to it. To change this, add the following rule:
#contentImages > div {
display: inline-block;
}
displayMDN
As you can see from the other answer on this page, getting three things to line up in all browsers is a bitch.
I did it on my site by applying a three column layout in CSS.
It takes more effort to set up, but it works in all browsers and is robust.
There are many descriptions out there but here's the one I used:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
This uses percentages rather than set sizes, so it works for many screen configurations.
You can also make workable but unreadable (and unmaintainable?) html by nesting columns.
(I have a three column layout, inside the middle column of a three column layout. looks great! - the page, not the HTML ;)
Good luck!
Use css3 box modal for best results.
#contentImages{
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack: center;
}