In my page, the top left image which is logo2.jpg shifts to right, and I want it to be at the same line of menu that is below it. How can I do that?
The page is here, if it helps:
http://www.dilyurdu.com
#logo {
margin:0 auto; width: 975px; position:relative;
}
#top {
position:relative; top:0px; left:0px; width:100%; height:95px;background:url("vocab_dosyalar/back2.jpg") top repeat-x;
}
#logoicerik {
position:absolute; top:2px;
}
#logoicerik2 {
position:absolute; top:2px; left:357px;
}
<div id="top">
<div id="logo" >
<div id="logoicerik"><img src="vocab_dosyalar/logo2.jpg" alt="easylang" style="border:0px;"/></div>
<div id="logoicerik2"><img src="vocab_dosyalar/slogan.jpg" alt="the easiest way to learn english"/></div>
<div class="header-info" style=" margin-right:1px; margin-top:15px" ></div>
</div>
</div>
your container class has width: 960px but your wraper(sic) class has width: 990px
so you need to make sure they both have the same width: I'd recommend making both 990px by changing the width of container
.container {
WIDTH: 990px;
}
Related
This question have been asked a lot on the web. But each try don't suceed
For a Website I need to make a header, I'm using django + boilerplate (I think that's boilerplate should be the cause, as copy paste of my code in js fiddle works, while it doesn't on local).
Here is the HTML I use:
<div id="topbar">
<div id="networking">
<div id="title">
EasyMusik
</div>
<div id="logo">
<img src="{% static "img/icons/myzik.svg" %}" />
</div>
</div>
</div>
And here is the CSS:
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
}
#tobbar div{
height: 100%;
display:inline-block;
}
#networking{
padding-left:25%;
}
#networking div{
display:inline-block;
}
#title{
position: relative;
height:100%;
font-size: 24px;
}
#logo img{
width:100%;
display:block;
float:left;
}
#logo{
position: relative;
height: 100%;
padding-left:15px;
background-color : #FF0000;
}
And I got this result
I want the Red area to fullfill the green one. Wich property should i add/remove to achieve that?
EDIT: Finally managed to get a fiddle:
Fiddle here
This did the worked for me. Though its not your CSS.
CSS:
.parent
{
width:100%;
background-color:Green;
height:50px;
text-align:center;
font-size:24px;
}
.sub
{
width:50px;
background-color:Red;
height:50px;
display: inline-block;
}
.img
{
vertical-align:middle;
padding-top:15px;
}
HTML:
<div class="parent">
Easy Muzik
<div class="sub">
<img alt="" class="img" src="style/img.png" />
</div>
</div>
Give #topbar a height. If you want your child container to be 100% height or width, your parent container has to have a height or width specified. Good luck!
#topbar{
display:block;
background-color : #29A329;
position: relative;
float: top;
height: 200px
}
I have a header that is divided into a few parts.
First, it's divided into left, and right.
The right part is then divided into stacked top and bottom, or at least that's what I'm trying to do.
However, they won't show up (unless there's text or something.)
HTML
<div id="header">
<div id="header_left">
<div id="header_title">
<p id="t1">TEXT</p>
<p id="t2">TEXT</p>
<p id="t3">TEXT</p>
</div>
</div>
<div id="header_right">
<div id="right_top">x</div>
<div id="right_bottom">x</div>
</div>
</div>
CSS
#header_right {
height:100%;
float:right;
}
#right_top {
height:140px;
width:100%;
display:block;
background-color:#FF0000;
}
#right_bottom {
height:60px;
width:100%;
display:block;
background-color:#000;
}
You have to set position:absolute for the empty div's to display
position:absolute;
You should to add this:
#header_right {
height:100%;
float:left; /*changed from right*/
}
/*added new class*/
#header_left{
float: left;
width: 97%;
}
how can i align my paragraph as shown in the following image
.
I need to show a newspaper kind of thing in which this should be included.
The following is the html code i'm using
<div class="left"></div>
<div class="right"></div>
<div class="myImage"><img src="question.png"/></div>
and the css code is this
*{
margin:0;
padding:0;
}
.right,.left{
height:300px;
width:200px;
float:left;
background:red;
margin:5px;
}
.myImage img{
width:100px;
height:100px;
}
.myImage{
clear:both;
position:absolute;
top:100px;
left:150px;
}
Create the image element on the left side, floating to the right of the text. Misplace it to the right, half the image's width with "margin". Then, on the right div, create the same effect using a blank div, but inverted. Float the div to the left side of the text and misplace it to the left by half the width. Like this:
<style>
.right, .left
{
width: 200px;
height: 300px;
float:left;
}
#real-img
{
width: 100px;
height: 100px;
float: right;
margin-right: -50px; /* half the width */
margin-top: 125px; /* vertical align considering page height minus img half height */
}
#fake-img
{
width:100px;
height:100px;
float:left;
margin-left: -50px;
margin-top: 125px;
}
</style>
And the html:
<div class="left">
<img src="imgurl" id="real-img" />
[CONTENT_TEXT]
</div>
<div class="right">
<div id="fake-img"></div>
[CONTENT_TEXT]
</div>
All of this, of course, considering you hard-code all the sizes.
Just how can I make my page look like this:
When the left, and right (the upper divs
When A and B's height is unknown (well, the one who has most content will decide on how down below C is)
Thanks in advance
I would make the sections percentages, that way you get these proportions no matter what screen size the user has.
CSS
#sectionA
{
float:left;
width: 20%;
}
#sectionB
{
float:left;
width: 80%;
}
#sectionB
{
clear:both;
width: 100%;
}
HTML
<div id="sectionA"></div>
<div id="sectionB"></div>
<div id="sectionC"></div>
http://jsfiddle.net/AHk78/
HTML
<div id="upleft"></div>
<div id="upright"></div>
<div id="below"></div>
CSS
#upleft { width:100px; height: 500px; background:red; float:left; }
#upright { width:300px; height:200px; background:blue; float:left }
#below { height:300px; width:100%; background:green; clear:both }
CSS:
#divA
{
float:left;
width: <width of div A>;
}
#divB
{
float:left;
width: <width of div B>;
}
#divC
{
clear:both;
}
HTML:
<div id="divA"></div>
<div id="divB"></div>
<div id="divC"></div>
You can make it inline with following example for right alignment:
<div style="width:30%;float:right"><!--write your required tags--></div>
Here width and float varies depending on the requirement
Something like this:
A
float: left
B
float: left;
C
clear: both;
Hi you can make this simply as like this
Css
#left {
width:100px;
min-height: 300px;
background:red;
float:left;
}
#right {
min-height:200px;
background:blue;
float:left;
width:400px;
}
#bottom{
height:200px;
background:green;
clear:both;
}
HTML
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
Live demo link here http://jsfiddle.net/rohitazad/AHk78/2/
Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom". So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.
Here is the code:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?
Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?
As I answered here, you can use http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text
to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal
'column' layout inside the main div.
Try this :
Rewrite your HTML code like this :
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
And rewrit your CSS file style properties :
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}