I'm currently making a website using Zurb Foundation. (See pictures further down)
The way I've layed out my navigation is using the foundation grid as follows:
HTML
<div class="row">
<!-- Navigation -->
<nav class="top-bar">
<div class="five columns">
<div class="one columns"></div>
<div class="five columns menu-elements rightalign">
About
</div>
<div class="one columns">
<div class="split"></div>
</div>
<div class="five columns menu-elements rightalign">
Testimonials
</div>
</div>
<div class="two columns logo">
<img src="images/logo.png" alt="">
</div>
<div class="five columns">
<div class="five columns menu-elements leftalign">
Services
</div>
<div class="one columns">
<div class="split"></div>
</div>
<div class="five columns menu-elements leftalign">
Contact
</div>
<div class="one columns"></div>
</div>
CSS
.top-bar { font-family: 'bebas_neueregular'; display: flex; text-align:center; margin-bottom:0px;
.menu-elements{ color: white; display: block; font-size: 32px; font-weight: normal; height: 45px; ; margin: 60px 0 0 0;}
.menu-elements > a{ color: white; }
.menu-elements > a:hover{ color:#e87524;}
.logo{padding: 10px 0 0 0; text-align:center; margin:auto;}
.split{width: 3px;background: white;height: 28px; font-size: 32px; margin: 60px 0 0 0; text-align:center;}
.leftalign{text-align:left}
.rightalign{text-align:right;}
The problem I'm having is with the way my menu actually looks.
This is with the rightalign and leftalign classes included.
And this is without them included.
I want the menu to be:
1: With the Logo dead center, hence why I've made the navigation into separate div's.
2: The links should take up an even amount of space each, however the way I've coded this makes the Testimonials link take up way more space that the other links, as it is longer which makes it look out of place and closer to the Logo. I tried fixing this by using the text-align style to align both inner links closer to the logo. But it still doesn't look right.
I'm wondering if anyone can think of any other ways I can try? Perhaps making the actual font stretch the letters to meet the edge of the div's or a certain percentage of the div by assigning more space in between the letters? I'll take any advice at this point.
If this isn't necessarily a programming question please point me in the right direction. I am looking for answers as to what I could try in code or in external reading: ie: "Look this up it might help" or "Here try this code it should correct them".
Thanks for any advice!
Related
I am using Bootstrap 4 Alpha 5 and I have the following HTML:
<div class="home-content">
<div class="container">
<div class="row flex-items-xs-middle">
<div class="col-md-7">
<h1 class="site-title text-xs-center text-md-left">
<span class="name">I'm Shivam Paw</span>
<span class="title">I create beautiful and bespoke websites to fit your needs</span>
</h1>
</div>
<div class="col-md-5">
<img src="https://www.shivampaw.com/wp-content/uploads/2016/10/shivampaw.png" class="float-md-right img-fluid logo-me mx-auto" alt="Shivam Paw">
</div>
</div>
</div>
</div>
However, if you see the image below then you will see that the content is misaligned to the left. I saw a post on this on SO but it said you have to put the row class in a container which I have already done.
You can see the site live at https://www.shivampaw.com
I looked at the .row CSS which has margin for left and right of -15px. Removing those margins fixed it but I don't think that's how it should be?
If this is what you expect then look at your CSS. This is the line centering your content
.text-xs-center {
text-align: center!important;
}
This should fix it though
.site-title {
font-size: 36px;
color: white;
font-weight: bold;
text-align: left !important;
}
Turns out I had some offending CSS in my style.css:
*, img.full-size{
max-width: 100%;
}
Changing it to:
img.full-size{
max-width: 100%;
}
Fixed the problem.
I'd like to use Twitter Bootstrap for one project which has a bit of a crazy layout.
The logo's background should start from the edge of the window, but the text in the logo should start where the .container begins.
Crazy, huh!
I'm not sure how to explain this so I drew it!
What I've done so far is this:
<div class="container">
<header>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- header -->
</div>
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.typography {
position: absolute;
right: 0px;
top: 20px;
line-height: 50px;
font-size: 50px;
font-weight: bold;
}
I created a demo#jsFiddle.
How should I structure my HTML, or what can I do with the CSS to achieve this effect.
CSS only solutions if possible.
Edit: Those kind of title element might appear on the page again, so solutions which are based on the fact that the element will be at the top of the page are not what I'm after.
First of all you have to take into account Grid System Rules:
Some Bootstrap grid system rules:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
Use rows to create horizontal groups of columns
Content should be placed within columns, and only columns may be immediate children of rows
Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via
negative margin on .rows
Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use
three .col-sm-4
So following the above rules you can achieve what you want like this:
Here a working JSFiddle fork from yours
#logo {
position: relative;
height: 100px;
background: #ffd800;
}
.container {
height: 500px;
}
.typography {
line-height: 35px;
font-size: 35px;
font-weight: bold;
padding-left: 0 !important; /*only because bootstrap are overwriting my styles*/
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper container-fluid">
<header>
<div class="row">
<div id="logo" class="pull-left col-xs-5 bg-theme">
<div class="row">
<div class="col-xs-offset-5 col-xs-7 typography">Dope
<br/>Text</div>
</div>
</div>
<div class="col-xs-7">
<nav class="pull-right">nav should be here</nav>
</div>
</div>
</header>
<div class="row">
<div class="container col-xs-offset-2 col-xs-8">
<p>Here you can put the content</p>
<p>and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more and more content</p>
</div>
</div>
</div>
You can change the # in col-xs-X as you wish to obtain your desire layout but always trying to follow the above rules.
I recommend making the following changes.
Start by making a .container-fluid
Then move your .container into your .container-fluid
lastly, move your header above your .container, but inside your .container-fluid
Once complete it should look something like.
<div class="container-fluid">
<header class="col-md-12>
<div id="logo" class="pull-left col-sm-3 bg-theme">
<div class="typography">
Dope
<br/>
Text
</div>
</div>
<div class="col-sm-9">
<nav class="pull-right"> nav should be here </nav>
</div>
</header>
<!-- Header -->
<div class="container">
<!-- Other content -->
</div>
</div>
would something like this work? http://jsfiddle.net/swm53ran/312/
if you want to see how the structure could happen over and over again, you could just add the sectioned off divs like in this fiddle: http://jsfiddle.net/swm53ran/313/
<div class="body">
<div class="header col-xs-12">
<div class="row">
<div class="title col-xs-offset-1 col-xs-5">
This is the title
</div>
<div class="nav col-xs-5">
This is your nav
</div>
</div>
</div>
<div class="container col-xs-10 col-xs-offset-1">
This is where your content goes.
</div>
</div>
Use the grid system to isolate header and body:
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-8">.col-md-8</div>
</div>
<div class="row">
<div class="col-md-2">.col-md-2</div>
<div class="col-md-4">.col-md-8</div>
<div class="col-md-2">.col-md-2</div>
</div>
</div>
Use .container-fluid for the content you want to be full width instead of the fixed-width that comes with .container.
Per Bootstrap:
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
If you want container-fluid to go the absolute edge of the window, you can set padding: 0; like:
.container-fluid {
padding: 0;
}
Here's a fiddle demo for you to review. http://jsfiddle.net/xsqezfro/ (I put a border around .container so you can see the div.
#logo {
display:inline-flex;
margin-left:-200px;
background: #ffd800;
}
#logo .typography {
margin-left:200px;
}
I am using older Skeleton css version, it is a 16 column grid system. I am trying to setup similar layout as in this picture.
http://imgur.com/sIV2aYo
I am pretty new to CSS, is using two containers (one inside another) a proper method?
Here is a sample code of what I been trying, but not working out too well =(
<div class="container">
<div class="eight columns alpha">
<div class="image">
<img alt="" src="images/coffee.jpg">
</div>
</div>
<div class="eight columns omega">
<div class="container">
<div class="eight columns">
<img alt="" src="images/plate.jpg">
</div>
<div class="eight columns">
<img alt="" src="images/macaro.jpg">
</div>
<div class="text area">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div> <!-- 2nd container -->
</div>
</div> <!-- 1st container -->
Thanks in advance.
I don't know your CSS, but maybe this helps you:
HTML:
// The class "columns" is your "block" (div) that needs the content. I've made a CSS with a background-color, height and width.
// In that div "columns we create new "columns, numbered by 1,2 and 3. I've floated all the text to the left and gived it a margin. The first, second and the third a margin of 15px ( top, right, buttom and left ).
// In the div column "columns" I have made a textarea with also a margin of 15px. The vertical-align is for a top vertical align. with the display we means that it needs to be in the block, with a margin of 40% ( it takes 40% of the block).
<div id="container">
<div class="columns">
<div class="eight-columns-1">
<img alt="" src="http://ww1.prweb.com/prfiles/2014/04/10/11752526/gI_134971_best-image-web-hosting.png">
</div>
<div class="eight-columns-2">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="eight-columns-3">
<img alt="" src="http://www.causingeffect.com/images/made/images/example/cow_100_100_c1.jpg">
</div>
<div class="textarea">
<p class="quote">"One of my favorite parts of using Square Register is being able to talk to customers while I am swiping their cards."</p>
<p class="name">Norm Mui, Coffee Foundry</p>
</div>
</div>
</div>
CSS:
.columns {background-color:yellow; width: 530px; height: 285px;}
.eight-columns-1 {float:left; margin: 15px;}
.eight-columns-2 {float: left; margin: 15px;}
.eight-columns-3 {float:left; margin: 15px 15px 15px 0px;}
.textarea {vertical-align:top; margin: 15px; display:inline-block; width: 40%;}
I know this question has been asked a lot about center a button or a div, but I can't find an answer for multiple buttons/divs.
I have a few sections in my design that require 2 or 3 buttons to be center aligned with a 10px margin between them, I also require them to span 2 cols. I'll paste the code below that I'm using and hopefully one of you can tell me where I'm making the mistake, thanks in advance.
<div class="container">
<div class="row">
<div class="col-lg-2 col-lg-offset-3 sec-1-btn">More</div>
<div class="col-lg-2 sec-1-btn">More</div>
<div class="col-lg-2 sec-1-btn">More</div>
</div>
</div>
#mixin btns {
background: $yellow;
color: $cream;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
text-align: center;
padding: 12px 0;
}
I have tried adding a margin-right: 10px to the buttons but then they aren't centered due the first being stuck in it's position. I have also tried using the center-block class but can't seem to get it to work. I'm sure I'm not the only person to have had this problem and it's probably me just not seeing the obvious. Once again, thanks in advance.
Use Bootstrap's text-center class..
<div class="container">
<div class="row">
<div class="col-lg-2 col-lg-offset-3 sec-1-btn text-center">More</div>
<div class="col-lg-2 sec-1-btn text-center">More</div>
<div class="col-lg-2 sec-1-btn text-center">More</div>
</div>
</div>
http://www.bootply.com/cK0rmAOcXR
Okay so, I had a similar problem where I needed two buttons centered at the top of the page. Due to the problem I just dropped it to one button (it was easier that way). Since I'm having the same problem now with three buttons, I can't drop them to one, so I reverted back to the two original buttons that caused me a problem and came up with this...
<div class="row start-btns">
<div class="col-lg-6 col-lg-offset-3 test">
<div class="row">
<div class="col-lg-5 pull-left start-btn">Get Started</div>
<div class="col-lg-5 pull-right tour-btn">Tour The Site</div>
</div>
</div>
</div> <!-- End .row .start-btns -->
#mixin btns {
background: $yellow;
color: $cream;
font-weight: 700;
font-size: 1.3em;
text-transform: uppercase;
text-align: center;
padding: 12px 0px;
}
.call-btn, .start-btn, .tour-btn {
#include btns;
}
.start-btn {
margin-right: 1em;
}
Having the parent ".test" span 6 cols and centered allowed me to nest another row with two buttons spanning 5 cols (actually 3 due to nesting) and pull one left and other right. This gives the effect that both buttons are spanning 3 columns and centered perfectly with a 10px spacing.
I have multiple rows that I would like to line up all in the same fashion.
<div class="row">
<div class="col-md-3">
<div class="img-circle index circle partner-circle box-shad"></div>
</div>
<div class="col-md-9">
<h2 class="partner-heading">Stuff </h2>
<hr />
<p class="lead">This is some text</p>
</div>
</div> <!-- row -->
But the h2 text is not lining up properly in relation to the other elements as shown in this picture:
The site is HERE if you would like to see it live. Can you help me figure out why the styling is inconsistent between the elements?
change (in your style.css)
.circle1, .circle3 {
margin: 39px 0 41px;
}
to this
.circle {
margin: 39px 0 41px;
}
then all the Images Line up with the rightside content