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))
Related
I want to display .tel in #header only if it's exists in #switcher.
The basic situation:
<div id="switcher"><div class="tel"></div></div>
<div id="header"><div class="tel"></div></div>
But user in system can turn off displaying .tel in #switcher. After that the code is something like this:
<div id="switcher"></div>
<div id="header"><div class="tel"></div></div>
In that situation I want to hide .tel in #header .
I know how to do it with jquery, but can I do it just with css or scss ?
This solution depends on where <div id=switcher> needs to appear on the page, but... if you're crafty, you can re-order your markup something like this:
<header>
<div id="switcher">
<div class="tel"></div>
</div>
<div class="tel"></div>
</header>
and then use the following style rules:
header .tel {
display: none;
}
header #switcher .tel,
header #switcher ~ .tel {
display:block;
}
I have a textbox I want at the very bottom of the screen at all times. Using the following markup and css, I was able to get it close but there's a weird gap under it and it sits on top of other content.
Markup:
<div class="content">
... stuff here
</div>
<div class="message-text">
<input type="text" placeholder="Start typing to share a message">
</div>
CSS:
.message-text {
position:fixed;
bottom:0px;
width:100%;
}
And here's a visual:
Any help would be awesome.
Just add this property, it'll work.
.message-text {
margin:0px;
}
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
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.
Here is the code:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
<img src="image2.jpg" alt="image2.jpg" />
</div>
.crop{
float:left;
margin:2px;
overflow:hidden; /* this is important */
position:relative; /* this is important too */
width:320px;
height:240px;
}
.crop img{
position:absolute;
top:-0px;
left:-0px;
}
I'm guessing I need to add something to my CSS? I know a solution would be to put the images as separate divs like this:
<div class="crop">
<img src="image1.jpg" alt="image1.jpg" />
</div>
<div class="crop">
<img src="image2.jpg" alt="image2.jpg" />
</div>
But I have next/previous arrows in my gallery so I need the images to be in the same div otherwise the arrows won't work.
I think the reason they are both appearing in the same place is because they are sharing the same css class, just name them differently with different top/left coordinates.