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>
Related
How would you position elements in a relatively positioned div, and keep them the same distance apart without going out side of the box? I have a relatively positioned div and inside of it is a div(nameTabs) that spans 100% of the width. Inside of that div is taskstabtext, and tasksaddbox. Tasks tab text is positioned where it is and stays there. Button does not. What would be the cleanest way of positioning the two in a flexbox responsive div? Thanks
<html>
<body>
<div id="box" style="display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class="nameTabs tasksTab">
<div class="tasksTabText">
<p class="tasksBtnText">Name</p>
</div>
<div class="tasksAddBox">
<p class="tasksAddBtn">Last</p>
</div>
</div>
</div>
</div>
</body>
</html>
LINK - https://jsfiddle.net/9rqd9ot9/15/
I figured it out. For anyone with a similar issue, just use the justify-content:space-between;rule. It seperates the two and then you can set their margins from the edge.
LINK- https://jsfiddle.net/9rqd9ot9/38/
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 want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
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'm working on a home page that is going to use a "custom" border around the whole website.
This is what I want to achieve with my div's.
[LEFT-TOP-BORDER ][MIDLLE-TOP-BORDER ][RIGHT-TOP-BORDER ]
[LEFT-MIDDLE-BORDER][Content ][RIGHT-MIDDLE-BORDER]
[LEFT-BOTTOM-BORDER][MIDLLE-BOTTOM-BORDER][RIGHT-BOTTOM-BORDER]
All the border corners (left/right top & bottom border) have a fixed width and height.
The middle-top/bottom-border has a fixed height but should expand to
the full width of the site.
The middle left and right border have a fixed width but should fill
up the whole height of the screen even when the content gets bigger.
The borders should stay clear of the content div, so if the window is
to small it should not be on to the content div.
The content div is going to have a fixed width and height.
I want the footer to be sticky without again overlapping the content
div when the window is to small.
Hope it's clear what I want to do!
I almost got it to work, but i got an problem with the left/right-middle-border. See for your self here
As you can see when the window is to small the borders overlap the content div.
But I think the way I have done it is not good?
How should I do it?
Thanks in advanced!
Kind Regards Alex
Looking at your code what you need to do is put your divs inside each other, not next to each other. So your middle section will be:
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
Then give your middle-left left padding of the correct width and position the background to the left, the middle-right some right padding of the correct width and position the background to the right, and then as your content gets taller, the margin divs will automatically expand.
Do this for all of the three layers, like so:
<div class="wrapper">
<div class="top-left">
<div class="top-right">
<div class="top-content">
</div>
</div>
</div>
<div class="middle-left">
<div class="middle-right">
<div class="middle-content">
Content
</div>
</div>
</div>
<div class="bottom-left">
<div class="bottom-right">
<div class="bottom-content">
</div>
</div>
</div>
</div>
The body height doesn't need the 100% in your CSS now. And the wrapper can be centered and doesn't need a height either. I would try actually getting rid of all of your CSS and starting that again with this new HTML structure. Just add the padding and some background colours and get that right.