I'm trying to apply a margin to text within a div, to have text centered horizontally and vertically. I'm not sure if there's a better way to do this, as I'm very new to HTML and programming in general.
<!-- begin header -->
<header style="background-color:#8b0000" style="height:50px;">
<!-- frankenstien-ish bootstrap grid within a bootstrap grid -->
<div class="row">
<div class="col-md-6">
<!-- this div is a placeholder div and has no content -->
</div>
<!-- this div contains all of the navigation buttons in their own bootstrap
grid -->
<div class="col-md-6">
<p style="text-align:center;margin">Test Text</p>
<!-- I know the margin has no value right now. Read question -->
</div>
</div>
</header>
<!-- end header -->
When I try to apply a margin to the <p> element, the margin makes the header larger and doesn't affect the <p> element's margin. How can I center an element vertically and horizontally? (The <p> is a test. It will be replaced with a button)
From the comments in your code it's clear that you are trying to create some navigation buttons. I'm not sure about bootstrap but in general I prefer using list items when I build navigation buttons. The reason is its really easy to control, edit and understand the structure.
Coming to your question, flex box are very comfortable to center align contents inside another, but I will not prefer that in this use case instead go with an, <li>or <div> tag - > add the name inside and then set the gaps using padding.
<ul class="navbtn">
<li>button 1 </li>
<li>button 2 </li>
<li>button 3 </li>
</ul>
Now the CSS will be
.navbtn li {
padding : 10px 5px;
}
Play with the values as per your comfort
This will center align the text inside the box.
Using list item will be more conformable than anything else when it comes to adding navigation buttons.
Related
Bootstrap 4.4.1
How do I place an element a button or any clickable in the gutter between two bootstrap columns.
I have a two panes UI — a left-aside and the main right section, in bootstrap grid columns.
I want to collapse the left aside section via a button in the gutter of the
I was thinking and have tried an absolute div — but to no avail!
<div class="row">
<aside class="col-md-4">
<!------ absolute here -->
</aside>
<div class="col-md-8">
</div>
</div>
This is my website
Does anyone know how to put the nav bar right next to the white box where my content will go? I just want it exactly vertically aligned with the white box, but make it sit just to the left of it. Thanks
HTML
<nav>
<div class="nav-container">
<ul class="nav">
<li><span class="text">HOME</span></li>
<li><span class="text">HTML & CSS</span></li>
<li><span class="text">USABILITY</span></li>
<li><span class="text">ACCESSIBILITY</span></li>
<li><a href="page5.html"><span class="text">HOW I BUILT THIS</span>
</a>
</li>
</ul>
</div>
</nav>
CSS
nav {
margin: auto;
}
EDIT: I misunderstood the question, here is the new answer:
http://codepen.io/Vall3y/pen/gbpRoG
I have put the nav and content again under the same container, but the container is now relatively positioned, and the nav is absolutely positioned at top: 0, left: 0. You can control the distance of the nav from the content by adjusting the container width, or with the left attribute of the nav. I have applied a dashed border around the container to demonstrate what is happening, but in your site it doesn't need a border of course.
Orig:
If you could include the rest of the code I could give you a better example, but here is the layout you want:
http://codepen.io/anon/pen/EajXgq
The key here is that the nav and content are adjacent in markup (elements comes right after another. I used float left to make them on the same vertical line but there are other techniques)
The nav is floated left, so that it doesnt take any flow space and allows the content to horizontally align at the center, using a fixed width and an auto margin.
They both are contained in a container to allow margin from the logo if necessary
Also see that there is a clearfix element, for clearfix. Google it to find out what it does but basically it allows the container to stretch over the floated elements so it doesn't mess up the layout
<div class="purple-logo"></div>
<div class="container">
<div class="nav"></div>
<div class="content"></div>
<div class="clearfix"></div>
</div>
So I have been trying to wrap my mind around this and cant figure it out why.
Note: Margin and padding is 0.
The 1st example is
<div> <!-- Gray Box -->
<div> <!-- Purple Box -->
</div>
</div>
I have two images - One is float, the other is inline-block.
The height of the div is shown by the gray color.
float: left;
display: inline-block;
The 2nd example is
<div>
<ul>
<a href = "#">
<li>
<img src = "...">
</li>
</a>
</ul>
</div>
Again, left and inline-block do different things
float: left;
display: inline-block;
Bottom Line
Any suggestions beside the question is welcome.
I don't know why margin / padding is changing and why div size matters by float and display. Thanks
There are 2 problems here.
1) Like someone mentioned in the comments, inline block takes space into account, meaning on the parent div you should have:
font-size:0;
2) Floating takes the element out of the document flow, meaning the parent will expand only past the last non floated child element. To fix this you should put a clearfix class in your css and add it to the parent of the floated element(s).
.clearfix::after{
content:'';
display:block;
clear:both;
}
So once you've done this your first example should look like this:
<div class="clearfix"> <!-- Gray Box -->
<div style="float:left"> <!-- Purple Box -->
</div>
</div>
Now the gray box should expand past the purple box;
As a matter of consistency i don't think you should mix inline-block with floating. One, it won't work on the same element and 2, they are designed for different things.
I'm trying to use CSS to create callouts in a block of text (for things like block quotes or relevant pictures). It has to be manipulable with Javascript and work with CMSs, so I can't just embed the callout in the middle of the text block and float it. Instead, the callouts are located at the top of the text block and I use a pusher div of a certain height to move it down to the desired location.
This technique works perfectly when all of the callouts are on the same side of the text block. The problem is when I want a callout on each side. The first pusher div pushes the second pusher div down, even though they are floated to different sides and both have a very small set width.
Here is an example of the problem. The pusher divs (normally 0px thick and transparent) are the red bars on the side. Both of them should start at the top of the block, just under the header. As you can see (at least if you're using Webkite/Gecko, I haven't tried anything else), the bar on the right starts underneath the bar on the left.
http://keaton.ws/Files/theCalloutProblem.html
I've tried playing around with the structure of the HTML (Taking the pusher and callout out of their parent div) and changing the display property of almost everything, and nothing has worked. Most of the changes I make result in the text not wrapping properly. I know this is a rather obscure problem, but any help would be greatly appreciated.
-Keaton
Here's the code, with styles inline:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style="width:750px; margin:0 auto;">
<div style="width:750px;text-align:center;"><h1>This is the header</h1></div>
<!-- Left Callout -->
<div>
<div style="width:0px;float:left;height:100px;"></div>
<div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div>
</div>
<!-- Right Callout -->
<div>
<div style="width:0px;float:right;height:250px;"></div>
<div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div>
</div>
<div style="width:700px; margin: 0 auto;">
<!-- Body Text -->
</div>
</div>
</body>
</html>
In these examples, the alternating left/right floats always have the same height.
http://meyerweb.com/eric/css/edge/slantastic/holiday.html
http://meyerweb.com/eric/css/edge/slantastic/demo2.html (<--why is this link unclickable?)
http://csstextwrap.com/#export
It seems that you have to sort the floats by height/position to achieve the desired effect:
http://jsfiddle.net/ge5YG/2/
<ul>
<li><img src='/profile.jpg'><span>Name</span><span>Address</span></li>
</ul>
I want to have two columns with the image in the left column spanning two rows and the text in the right column on an upper and lower row to the right of the image.
I tried using divs with blueprint css but then the anchor tag is displayed in a weird way - it doesn't appear to encompass the entire list element on hover but instead a sliver.
I also tried with a table layout but because I can't control the padding well with CSS it looks bulky.
How can I turn this into a two-column layout within the list element?
Some of your HTML is invalid, so I've taken the liberty of cleaning some of it up. Something like this should work for you:
<ul>
<li>
<div>
<span class="item-container"><img src="blah.jpg" /></span>
<div class="item-container">
<span class="item">Name</span>
<span class="item">Address</span>
</div>
</div>
</li>
</ul>
CSS:
.item {float:left; clear:left;}
.item-container {float:left;}
Add margins/padding as necessary.
Working sample: http://jsfiddle.net/andrewwhitaker/KUaCE/
use float:left on all elements, also needs float for proper height