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;
Related
I would like a button between two hr elements with a bit of spacing wither side of the button and for this to remain the same when collapsing. I am using the Bootstrap framework.
I have got the current effect using the second answer from this question:
Add centered text to the middle of a <hr/>-like line
Therefore, my code is the same as what the answer provided. The first answer doesn't provide the spacing either side of the button.
Using media queries I am able to maintain the desired effect until I reach the 768px width break. Where this happens:
I can't continue to use media queries as I would have to apply them per pixel!
There must be an elegant solution to this? I'm assuming better use of columns and width percentages ?
Any help would be appreciated.
Using Bootstrap this solution should work fiddle:
<div class="container-fluid">
<div class="row">
<div class="col-xs-5">
<hr>
</div>
<div class="col-xs-2">
<a class="btn btn-md btn-primary">Add</a>
</div>
<div class="col-xs-5">
<hr>
</div>
</div>
</div>
You can use image for these lines by simply adding img tag:
CSS
img{
width:200px;
border:0;
height:10px;
background:url(http://goo.gl/bPZONP);
}
HTML
<div><img src="http://goo.gl/bPZONP">Button<img src="http://goo.gl/bPZONP"></div>
Demo
http://jsfiddle.net/qW6z9/
I have done a quick HTML page where I have used position:absolute to position all div's relative to the browser edges. When i re-size my browser things always stay on the left side.
What I now want to do is to create a new div and into it place all the other div's. I want this new div to always be centered even if user re-sizes browser with a width of 900px.
AND all the positioning i have done using absolute should now be with regards to the containing div.
What i have done so far is that i have tried the classic three column tutorials but the problem im having is that the position:absolut dont conform to containing div. Not sure how I will ask the question to make it clearer. Plz ask me questions and I will evolve the question until it makes sense.
Update:
Here is an example of the code I have right now. I want this to be centered in an fixed with div.
http://jsfiddle.net/favetelinguis/nf6mE/
<body>
<div class="div4">
<div class="div5">
---------------
</div>
<div class="div6">
-----------------
</div>
</div>
<div class="div7">
Foo<br>
Hoo<br>
Moo<br>
</div>
<div class="div1">
A horizontal imagge is placed here
</div>
<div class="div2">
Foo<br>
Hoo<br>
Moo<br>
</div>
<div class="div3">
Foo<br>
Hoo<br>
Moo<br>
</div>
</body>
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 just started using bootstrap, and i think it's awesome. but i'm having a hard time figuring out how to add a wrapper around the basic container of bootstrap.
I'm using the Fluid responsive css, and it centers the elements inside the .container nicely.
but my WHOLE page as a whole has a BACKGROUND, and i wanted a different background for the actual content area (where the container is)
So basically i have for example
<div id="wrapper-page" style="background-color:grey; ";>
<div id="wrapper-content" style="background-color:#93C;>
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
</div>
Is there a simple way to achieve what i need?
I actually could easily modify the bootstrap.css file to kind of achieve what i want but i really want to keep my modifications outside of the template/framework for easy upgrade later
Why don't you make the wrapper-content also a Bootstrap .container?
<div id="wrapper-page" style="background-color:grey; " ;="">
<div id="wrapper-content" class="container" style="background-color:#93C;">
<div class="container">Header Contents here </div>
<div class="container">Body Contents here </div>
<div class="container">Footer Contents here </div>
</div>
</div>
Demo
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/