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.
Related
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 have seen this question and similar questions asked a few times on here, but how can i prevent line breaks to my floated items inside a scrolling section. I have a div that I want a horizontal scroll on.
I know this can be done by added the margin or left values to each item as shown here, this seems to be a common fix for the problem:
JSFIDDLE From this Post
This works well if you know the width of the container, how would this work with a width of auto as I intend to pull this data from a database, so the width would vary depending on the number of results.
Heres my example:
CSS:
.items{
width:100%;
overflow-x:scroll;
overflow-y:hidden;
background:rgba(255,255,255,.8);
height:350px;
position:relative;
}
.items .scroll{
height:100%;
padding:0px;
width:auto;
position:absolute;
white-space:nowrap;
}
.items .item{
height:100%;
margin-left:25px;
margin-right:25px;
width:150px;
float:left;
position:relative;
display:inline-block;
}
.items .item a{
padding:5px;
background:#0e76bc;
color:#FFF;
text-decoration:none;
}
.items .item .img:hover{
box-shadow:0px 0px 3px rgba(0,0,0,0.5);
-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.5);
}
.items .item .img{
height:175px;
width:100%;
background-size:contain;
background-position:center center;
background-repeat:no-repeat;
}
HTML :
<div class="items">
<div class="scroll">
<div class="item">
<p class="center"><div class="img" style="background-image:url(images/sample1.jpg);"></div></p>
<p class="title">Product Name</p>
<p class="left"><strong>Current Bid:</strong> £10.00</p>
<p class="right">View Item</p>
</div>
<!-- .item repeats a few times after a DB query, hence exact width is unknown -->
</div>
</div>
This could be solved with an init() function in javascript, but I feel there should be a way to do this in css.
Try like this along with your code: DEMO
CSS:
.items .item{
height:100%;
margin-left:25px;
margin-right:25px;
width:150px;
position:relative;
display:inline-block;
}
Just take float:left; away from .items .item, and it seems to work like asked:
.items .item{
height:100%;
margin-left:25px;
margin-right:25px;
width:150px;
position:relative;
display:inline-block;
}
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
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.
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.