I have received one design from my designer and he wants to write CSS for him. I tried as below:
.o__header{
width: 1080px;
position:relative;
left:40px;top:135px;
}
.o--text{font-size:14px;color:#fff;position:absolute;top:-210px}
.o--head {font-size:40px;color:#fff;position:absolute;top:-310px}
.o--image {position:absolute;
top:0px;
left:0;
right:0px;
bottom:0;}
<div class="o__header">
<div small="6" medium="6" large="6">
<h1 class="o--head">Page Header Goes Here</h1><br/>
<p class="o--text">Small hep description here</p>
</div>
<div small="6" medium="6" large="6">
<img src ="img/img.PNG" style="max-
width: 100%;height:auto;" styleClass="o--image">
</div>
</div>
where small,large and medium are custom created mixins.
But this approach is not working great. I want it resposnive too. How to go about that?
below is the layout
Related
I need to put a price (text) over some thumbnails. I found the following code which works..
CSS
.col-md-4 {
display: table;
}
.thumbnail{
position:relative;
}
.thumbnail img{
max-width:100%;
}
.thumbnail h1{
position:absolute;
top:50%;
left:0;
color:lightgrey;
width:100%;
text-align:center;
transform:translateY(-50%); /* doesn't work in IE9 and older I'm affraid */
margin:0;
}
ASP.NET
<div class="col-md-4">
<div class="thumbnail">
<img src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
<h1>Hello</h1>
</div>
</div>
However, I want to try to and integrate the above to the following complicated code line and I haven't got a clue where to start (It was written for me). Here's the line..
Dim liByLiteral As New LiteralControl("<li><img class='lazy" & opacity & "' data-src='http://images.example.com/thumbnails/" & filenameAndPrice(0) & "' height='120' width='120' src='./files/images/loader.png' /></li>")
filenameAndPrice(4) is the price of the item. I'm happy with it being added to the Nyromodal Title but needs to be displayed over the thumbnail image as well. Any help is really appreciated.
add runat server attribute and give Ids to your html controls.
<div class="col-md-4">
<div class="thumbnail">
<img runat="server" id="tmdiv" src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Nail(thumb).jpg">
<h1 runat="server" id="myheaderid" >Hello</h1>
</div>
</div>
On the server, now you can access these and can add any html attribute.
like ;
myheaderid.InnerHtml= liByLiteral
tmdiv.atrributes.add("title", filenameAndPrice(4))
Single page website
I have a single page website (one page only). I can navigate with a menu to get to different parts of the page with anchor name, just like (see sidebar):
WordPress Docs
Hide the other stuff
I want to hide stuff that does not belong the the current active page part and just show the information of the part that I'm looking at.
Question(s)
Can I hide stuff that is not a part of the current #anchor_part with only CSS?
Have you seen any sites already doing this?
Working Example
Try this Html
a
b
c
<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>
and Css
#a, #b, #c{
display:none;
}
#a:target{
display:block;
}
#b:target{
display:block;
}
#c:target{
display:block;
}
yes you can do this with only css,first creat < div > with a specific width and height and overflow to hidden,then place your stuff in this div beside eachother
firstWindow
secondWindow
thirdWindow
<div class="window">
<div id="firstWindow" class="window">
firstWindow
</div>
<div id="secondWindow" class="window">
secondWindow
</div>
<div id="thirdWindow" class="window">
thirdWindow
</div>
</div>
.window{
width:300px;
height:300px;
overflow:hidden;
}
something like above;
note that you can use this html/css if you have a constant height,the height of your stuff should be the same.
Hey guys i cant seem to get my background to not repeat or even get a border to show here is the code
HTML:
<div id="content">
<div class="product">
<p><strong>Wonderful Guest House</strong></p>
<p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
<p>Guest Houses are great alternative accommodation to expensive hotels when travelling for business or for pleasure. Most guest houses offer the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity and even conferencing facilities. </p>
<p class="style1">>> Visit Website …. </p>
</div>
</div>
CSS:
#content{
width:90%;
margin-top: 60px;
margin-left:5%;
margin-right:5%;
background-color:#CCC;
background-image:url('images/prodblock.jpg')
background-repeat: no-repeat;
}
.product{
width:318px;
display:block;
float: left;
}
Honestly i have tried every which way i could find online but cannot get this to work :/ i dont see any conflicts here but i might be missing something.
this happens in all the browsers i tested
Thanks for your input in advance.
You are missing a semi-colon at the end of the background-image property and hence, the next property fails i.e background-repeat
background-image:url('images/prodblock.jpg');
--^--
Try this: This happens because of float property. So I added clear div. you can use this as a trick.
<html>
<head>
<style type="text/css">
#content{
width:90%;
margin-top:60px;
margin-left:5%;
margin-right:5%;
background:#ccc url('https://www.google.com/images/srpr/logo4w.png') no-repeat;
}
.product{
width:318px;
display:block;
float: left;
}
</style>
</head>
<body>
<div id="content">
<div class="product">
<p><strong>Wonderful Guest House</strong></p>
<p><img src="images/knysna.jpg" width="282" height="171" align="absmiddle" /></p>
<p>Guest Houses are great alternative accommodation to expensive hotels when travelling for business or for pleasure. Most guest houses offer the same services as big hotels like cooked meals, airport shuttles, satellite TV, internet connectivity and even conferencing facilities.</p>
<p class="style1">Visit Website</p>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
I don't know if this can be done with CSS, but before going the JavaScript way, I would like to know if it's possible to center (as a whole) a set of absolute positionned divs:
<div id="container">
<div id="item1" style="position:absolute;left:100px;top=50px>...some content...</div>
<div id="item2" style="position:absolute;left:0px;top=0px>...some content...</div>
<div id="item3" style="position:absolute;left:150px;top=100px>...some content...</div>
<div id="item4" style="position:absolute;left:75px;top=75px>...some content...</div>
</div>
I would like to center the bounding box of those items in the page.
Of course since they're styled with "position:absolute", they're out of the flow, so the container div has a size of 0 px... and the usual tricks didn't work.
Finally, the snippet above being just illustrative, in practice the items would be arbitrarily positionned (some of them dynamically), and their size and content is not known (and can be dynamic too). Because of all this dynamicity, I would prefer to have everything handled by CSS is possible, rather than having hook a whole bunch of events.
Hey now you can change your html and css than u can easily as like this
HTML
<div id="container">
<div id="item1">...some content...</div>
<div id="item2">...some content...</div>
<div id="item3">...some content...</div>
<div id="item4">...some content...</div>
</div>
Css
#container{
background:red;
overflow:hidden;
}
#item1, #item2, #item3, #item4{
background:pink;
margin:10px;
margin-left:100px;
}
Live demo
How about to give a fix width to #container and giving a position:relative;
Please check this http://jsfiddle.net/65vk2/
I started to design website using the 960 grid system everything works amazingly apart from the following
<div class="grid_1 pagelink prefix_12"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
<div class="grid_1 page"><p>3</p></div>
<div class="grid_1 pagelink"><p>4</p></div>
I need the above 4 links to be in a container, so that i can have a white background across all for boxes, so I am doing this:
<div id="somecontainer">
... the code above
</div>
I also tried
<div class="grid_4">
... the code above
</div>
But this does not work. If the above had worked I wanted to add this style:
#somecontainer{
background:white;
overflow:auto; /* I added this but not difference */
}
I hope you can help me fix this problem
thanks
Try This
#somecontainer{
width:960px; /* or 100% */
background:white;
overflow:hidden; /* I added this but not difference */
}