I want to achieve the following effect using HTML & CSS:
Printscreen
However, I'm not sure if I'm doing it correctly.
The current state is the following:
<div class="post"><!-- Posts are just divs with a white background -->
<div class="post-header">
<div class="left">Som Text</div>
<div class="center">
<img src="pseudo" class="center" />
</div>
<div class="right">Som Text</div>
</div>
<p class="title">Som Text</p>
</div>
Then, I'm simply doing a margin-top:-66px; on div.post div.post-header.
This is probably not what one should do.
Can you give me an idea on how to approach this?
You Can Try Position-relative thing also, for this make post class position:relative and other class as position:absolute and set them where u want
a print screen or just a margin-top property won't do any good, since the screenshot is not displayed here too.
can u give me the link to see the live preview of the page
I did something similar on my site. Feel free to visit http://robertfauver.com/
Related
I'm building a feature that has three circles inside of container that are next each other. Initially when I began building this feature I thought that I could just drop my circles into a flex container and they would all be good when I added media quires and resized the page.
Much to my despise that was not the case..The circles went inside of the container perfectly but when I started to resize page I noticed that they were squishing! I know this because border-radius:50% as circles need to be a percentage and when they are pressed they change there size bc they are fluid.
This issue prompted me to think of solution to prevent the circles from squishing. I had an idea of surrounding divs around the circles which would possibly stop them squishing so looked around to see if anyone had done this before.
Much to my liking I found a solution that someone had posted on STO. I modified the solution slightly to meet my own needs which works fine but there's a small issue here, I'm not sure I like the way it makes my markup look. Messy messy messy!
Solution
<!-- Projects -->
<div class="circles">
<div>
<div>
<div>
<div class="projects">
Projects
</div>
</div>
</div>
</div>
<!-- About -->
<div>
<div>
<div>
<div class="about">
About
</div>
</div>
</div>
</div>
<!-- Contact -->
<div>
<div>
<div>
<div class="contact">
Contact
</div>
</div>
</div>
</div>
Compared to my original markup there is a clear difference in the less amount of divs
Original
<div class="gridRow">
<div class="gridItem1">
Projects
</div>
<div class="gridItem2">
About
</div>
<div class="gridItem3">
Contact
</div>
</div>
I'm want to figure a way to clean up the solution markup a little more but I'm not really sure if there's a way to do that..I don't want to use svg as I just want a css solution. Any ideas?
Fiddles here
Squishing circles
https://jsfiddle.net/kapena/vmt54cd0/
Responsive Circles
https://jsfiddle.net/kapena/vmt54cd0/
Try adding these to the gridItem styles:
min-width:200px;
width:200px;
max-width:200px;
min-height:200px;
height:200px;
max-height:200px;
I'm having some issues with my CSS on a transform fold out on hover style element. At the moment it folds out too much and I'd like to reduce the height. I've tried several things to no avail. I was able to find the code itself from a demo located here: http://lab.aqro.be/fb_btn_concept.html
I've tried adjusting a lot of the #under div parameters but so far every time I get the hover state the way I want it the transition messes up and doesn't look right. I'm not very familiar with transitions so I'm hoping somebody on here can help? Here is my jsfiddle:
http://jsfiddle.net/HD2pm/
My goal is to have the fold out be around 100px in height instead of the obviously much larger version that it is at currently.
<div class="row">
<div class="span4">
<section id="btn">
<p>Some Text Will Go Here</p>
<div id="under">
<div class="logo"><div class="recto"><i class="fa fa-user"></i>Consumer</div></div>
<div class="top"></div>
<div class="logo verso"></div>
</div>
<div id="shadow"></div>
</section>
</div>
</div>
Looks a lot better with
-webkit-perspective: 550;
http://jsfiddle.net/DrQP2/
I am not very good at html and this may seem like an easy thing to do, but I need to add a scroll bar to a box of information.
The coding for the box looks like this:
<div id="box">
<div class="title">Doctor Who</a>
</div>
<div class="links">
<div class="text-container">
<IMG SRC="https://31.media.tumblr.com/dea38d2e07dc5ef0a30adbc213f4eda0/tumblr_inline_mxq54ba4yx1qhpvm6.gif" WIDTH=100 HEIGHT=100>
<br>
<br>
<IMG SRC="https://31.media.tumblr.com/f5d7e9e7d802697bb948811a79d0c0ba/tumblr_inline_mxq627yuKg1qhpvm6.gif" WIDTH=100 HEIGHT=100>
</div>
</div>
</div>
and on the website page it looks like icons in a box and there are multiple boxes on the page each including many different icons. The problem is, the icons take up too much room in the boxes so I wanted to add a scrollbar to each box so that all the icons and boxes will fit nicely on the screen.
Any help is appreciated and because I am a noob please don't make it to complicated for me. Thanks for any and all help.
You need to set address the overflow of your element
#box{
width:XXpx;
height:XXpx;
overflow:scroll;
}
That will place a scroll bar in your box
I have code sort of like this:
<div class="right_col">
<div class="right_box">
<div class="other_div">text</div>
text etc
</div>
<div class="right_box">
<div class="other_div">text</div>
text etc
</div>
<div class="right_box">
<div class="other_div">text</div>
<div class="anotherother_div">text</div>
text etc
</div>
<div class="right_box">
text etc
</div>
</div>
So a main div with other divs inside which may or may not contain additional divs.
What I want to do is style them so "right_box" has alternate background colours.
The problem is that I am selecting the interior divs/taking them into account when doing odd/even etc.
This is the CSS I've tried:
.right_col .right_col:nth-child(even) {background:red}
.right_col .right_col:nth-child(0n+1) {background:red}
Any ideas where I'm going wrong?
You should be using nth-of-type() rather then nth-child().
Here's an awesome article on CSS-Tricks by Chris Coyer which explains the difference between the two.
I've got problem with paragraph on my website: naprawiamy.za.pl. As u can see there is a big white space in the text. What's that and how it got there? Could somebody tell me?
This happen because the above div contains img that have float:left. So there is need to clear the float. Add overflow:hidden for the div with img tags and will fix the text below.
Your code is written as:
<div id="main">
<div>
<img src="lol.png" id="logo" alt="logo serwisu">
//more images
</div>
<div id="story" >
Your Text
</div>
</div>
Set the CSS Property float:left for
1. <div style="float:left">
2. <div id="story" style="float:left">