How do I remove the whitespace found at website.com underneath the elements div is like 730 px of whitespace. I've been fiddling around with my css code for over an hour now. I can't seem to isolate the problem
HTML:
<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>
<div class="element">
<img src="imagesrc">
<div id="Projecttitle" class="Projecttitle">Title goes here</div>
<div id="Projectdescription" class="Projectdescription">Project description goes here</div>
</div>
CSS:
div.element img:nth-of-type(1){
padding-top:80px;
}
div.element div:not(:nth-of-type(1)){
position:relative;
width:auto;
height:auto;
bottom:375px;
}
div.element img{
position:relative;
right:198px;
padding-right:56px;
border:none;
}
.Projecttitle{
text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 22px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
padding-top:15px;
}
#Projecttitle{
position:relative;
bottom:162px;
width:410px;
height:155px;
left:226px;
}
.Projectdescription{
text-transform:none;
color:#000;
text-align:left;
letter-spacing:.3px;
font:normal 17px QuaverSans;
margin-left:auto;
margin-right:auto;
overflow:visible;
z-index:0;
vertical-align:middle;
}
#Projectdescription{
position:relative;
bottom:290px;
width:410px;
height:155px;
left:226px;
z-index:0;
}
First of all, you have an unclosed div tag. the second div.element is nested inside of the first one, when they are obviously supposed to be siblings. When you fix this, the problem will become more obvious. You are also using way too much relative positioning. This confuses the issue more because the appearance of the element on screen changes, but the space it 'occupies' in the document flow does not.
Related
This is a very minute detail, as it is not a problem when there ARE posts obviously; but when the theme has no posts, the page displays a white border with no padding or content. I'd like to hide that completely if there are no posts.
HTML
<div id="container">
<div id="content">
{Block:posts}
...
{/Block:posts}
</div>
</div>
CSS
#container:empty{
display:none;
}
#container{
position:absolute;
border:5px solid white;
border-radius:3px;
display:inline-block
background:#155484;
max-height:497px;
width:547px;
overflow-y:scroll;
overflow-x:hidden;
margin-left:43%;
margin-right:15%;
margin-top:3%;
margin-bottom:5%;
}
#content{
margin:5px;
margin-right:0px;
background:#7995d6;
padding:5px;
padding-left:10px;
width:auto;
color:#fff;
font-family:monospace;
text-decoration:none;
font-weight:normal;
}
I know that display:none doesn't actually work, but I'm lost on where to start. Also, I'd like to stick to CSS or HTML if possible; I don't have a clue how to use anything else.
When I use a div block with float:left and another with relative position, the second block behaves unexpectedly - the text goes beyond the box and its background color. What is happening here?
https://jsbin.com/merehowoxa/1/edit?html,output
#first-section{
color:black;
background-color:pink;
width:100px;
float:left;
}
#second-section{
color:purple;
background-color:yellow;
width:100px;
height:100px;
position:relative;
left:500px;
top:200px;
}
Whenever you use Float: left, It needs to be cleared.
Add this between both your div's
<div id="first-section">
<p>Text1</p>
<p>Text2</p>
</div>
<div style="clear:both">
<div id="second-section">
I want to have a page like this.
After trying some CSS and HTML code like this:
CSS Code:
html,body{
margin:0px;
background-color:#CCC;
}
#header{
background-color:#FFF;
height:350px;
width:750px;
display:block;
}
#menu{
background-color:#096;
height:60px;
width:100%;
display:block;
}
#content{
background-color:#03F;
width:750px;
height:400px;
}
#footer{
background-color:#900;
height:120px;
width:750px;
display:block;
bottom:0px;
position:relative;
}
HTML Code:
<center>
<div id="header">
</div>
<div id="menu">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</center>
it was the same thing but after making some text into "content" part divs got separate. like thisThis.
Whats the issue in my CSS code?
It is Because p tag have some default margin.
Add CSS like this
p{
margin:0px;
}
Fiddle
I'm having problems getting the background formatting to work with my and tags. The text I type is showing up and formatting like I want, but I want the white background and border to extend down too. I've tried a couple things, including doing away with the #bodywrapper and extending the #headerwrapper by adding a height. I'd rather not do this, but I guess I will if I have to. If I add a paragraph within the #bodywrapper, but outside of the section or aside tags, it works correctly. Why isn't this working?
Here is my code:
CSS:
#headerwrapper {
width:80%;
height:auto;
margin-top:.5em;
margin-right:auto;
margin-bottom:0;
margin-left:auto;
background:#FFFFFF;
border-top-left-radius:.625em;
border-top-right-radius:.625em;
border:1px #000000 solid;}
.header {
width:100%;
height:10em;
margin:0;
border-bottom:3px #4E5E78 solid;}
img {
float:left;
margin-top:1.5em;
margin-right:1em;
margin-bottom:1.4em;
margin-left:1em;}
#bodywrapper {
width:80%;
height:auto;
margin-top:0em;
margin-right:auto;
margin-bottom:2em;
margin-left:auto;
background:#FFFFFF;
border-bottom-left-radius:.625em;
border-bottom-right-radius:.625em;
border:1px #000000 solid;}
section {
width:60%;
float:left;
margin:auto;}
aside {
width:40%;
float:right;
margin:auto;}
HTML:
<body>
<div id="headerwrapper">
<div class="header">
<img src="images/headerlogo.png" alt="Digital Billboard Guru" />
<h1>Call Now For Your<br />FREE Consultation<br />(000)000-0000</h1>
</div>
</div>
<div id="bodywrapper">
<section>
<p>Test</p>
</section>
<aside>
<p>Test</p>
</aside>
</div>
</body>
</html>
Add overflow:auto into the tags so that u don't have to adding the height.
I hope this is what you want.
Try adding overflow:auto to the #bodywrapper.
Fiddle
i have set the following css to ger border image of the div container but the problem is that my right image is not coming right on the border but it leaves spaces from the right border side of the div container when it stretches out.
<div id="container">
<div id="left-image"></div>
<div id="main-containts">
<div id="data-containts">
data
</div>
</div>
<div id="right-image"></div>
<div id="bottom">
<div id="bottom-left"></div>
<div id="bottom-center"></div>
<div id="bottom-right"></div>
</div>
</div>
div#container{
position:relative;
margin-left:120px;
margin-right:120px;
float:top;
padding-top:0;
margin-bottom:50px;
width:auto;
height:100%;
}
div#left-image{
position:absolute;
left:0;
width:28px;
height:100%;
float:left;
background:url(border-left.png) repeat-y;
}
div#right-image{
position:absolute;
right:0;
float:right;
width:30px;
height:100%;
margin-right:0;
background:url(border-right.png) repeat-y;
}
div#bottom{
position:absolute;
bottom:0;
width:100%;
height:36px;
z-index:100;
}
div#bottom-left{
width:51px;
height:36px;
background:url(corner-left.png) no-repeat;
float:left;
}
div#bottom-center{
height:36px;
background:url(bottom-image.png) repeat-x;
margin-right:49px;
/*clear:both:*/
}
div#bottom-right{
width:49px;
height:36px;
background:url(corner-right.png) no-repeat;
float:right;
margin-top:-36px;
}
If you are targeting the modern browsers only which supports css3. It could be easily accomplished by the css3 border-image property. Its worth to have a look at the property incase if you are not aware.
http://css-tricks.com/understanding-border-image/
Incase if you want your above code to work.Paste your div structure.