I have an image that is 1007px x 81px that I am using as the logo of a website and I cannot center it WITHOUT using margin-left. I have tried margin: 0, auto;
.navbar-brand {
width:100%;
height:auto;
margin-left: 35%
}
I am assuming you mean center horizontally, since your element has a width, you can simply set its margin-left:auto; and margin-right:auto;
But setting something to width:100%; will actually take up the full size of its parent, and that means you need to center the parent, not the child.
I've put a little snippet (at the bottom of my post) to do this. There are a few confusing things about this question as it stands.
I'm not sure if you intended to modify the navbar-brand class already present in bootstrap, or if you are intending to make a new class, with its own name.
If your image is so wide, it's probably alone on a row of your website, with nothing else beside it, which makes the layout much simpler.
If the below isn't what you're looking for, perhaps the issue can be more thoroughly debugged by you posting the HTML in question, a screenshot, or a fiddle of it not working as intended.
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<style>
.navbar-brand {
text-align: center;
float: none;
height: auto;
}
.navbar-brand>img {
display: inline;
}
</style>
</head>
<body>
<div class="navbar-brand">
<img width="1007" height="81" />
</div>
</body>
</html>
Related
I am trying to add a nice background color to a website page. This should be straightforward using background-color in my CSS file, but it won't show. So far, I have played around with my HTML code and found out that when I remove a link to a bootstrap 4 CSS file in my header, it displays perfectly. However, I need to keep bootstrap 4, so I tried other fixes:
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4;}
The background-image: none, height:100%, or the padding:0% weren't effective compared to removing the bootstrap 4 link:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Any guidance at all would be greatly appreciated solving this issue without removing bootstrap 4.
By default, Bootstrap uses a white background. You will need to use the !important flag to override it.
body {
height:100%;
padding:0%;
margin-top: 50px;
background-image: none;
background-color:#B59DA4 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body>hi</body>
I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
So my problem is why does it do that? I tried everything including 'display: block', not using 'position: absolute' (Which worked but i don't know how to flush it without this), and even 'position: fixed' (Same thing as absolute).
Can anyone tell me why it does that? I do know that 'absolute' destroys your document NORMAL flow but I thought it would still respond to display: blocks? Why is it not listening?
EXTRA:
If possible could anyone link me to any good html and css positioning tutorials? I've done about a good 100+ queries of search on google and could not find any that explains the 'deep core' of how css works.
ANSWER:
Why does this work?
CSS:
#font-face {
font-family: Clash;
src: url(supercell.ttf);
}
body, html {
margin: 0;
padding: 0;
}
#navContainer {
background-color: #3a5795;
width: 100%;
float: left;
}
#contentContainer {
display: block;
clear: both;
}
#navHeader {
font-family: Clash;
color: #ffd700;
}
HTML
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Golden Gators</title>
<link rel='stylesheet' type='text/css' href='styles.css'/>
</head>
<body>
<div id='container'>
<nav id='navContainer'>
<h1 id='navHeader'>Golden Gators</h1>
</nav>
<div id='contentContainer'>
asd
</div>
</div>
</body>
</html>
Problem with this:
Whenever I try to put a navigation bar it makes the entire container enlarge which I do not like.
Question for this:
When I type 'float: left' it expands up top and bottom doing the effect I want it to. Which is a bit odd to me as I thought float: left only moves to the left. Why does it expand up when I do float: left? And this just emphasizes the fact that I do not understand 'css' at it's 'deepest'.
I did not completely understand what you were asking (probably because it's pretty late) but I played around with your code a bit. Here is what I can tell you (if I'm wrong hopefully someone will correct me):
Browsers have default values for elements. The reason your container gets larger when you use float: left is because it is moved outside of the document flow. The default padding and margin value on the h1 element are what enlarges the container. (Notice that the asd outside of the nav container doesn't seem to move. This is because of the margin on the h1 element.)
The same explanation goes to why your nav container grows when you try to put a navigation bar into the container. If you are trying to make a horizontal navigation bar, try using display: inline-block on the h1, ul, and li elements. This will make them readable from left to right. (Hopefully this is what you were trying to do.)
As for web tutorials. Try the following:
w3schools --> A great website for learning about web development.
Treehouse Web Tutorials --> Sign up for their free 14 trial and go into their front-end web track. you will learn ALOT.
I'd like to apologize if I gave a pretty bad response. Hopefully this could be of help to you in some way!
I'm working on adding some icons to my company's website, but I'm having trouble getting them to link to a page.
I'm using an image sprite and CSS to change the image on hover. If you click here and look under Services We Offer you can see the image hover.
I'm using a div to do this, with this code:
<div class="video-box"></div>
And in my CSS:
.video-box {
width: 184px;
height: 222px;
background: url("http://bluestarmultimedia.tv/wp-content/uploads/2015/01/rollover-video-2.png") no-repeat scroll left top transparent;
display: block;
}
.video-box:hover {background-position: -184px 0px;}
When I add a link like this, it doesn't work.
<div class="video-box"></div>
How can I get the images to link and keep the roll over?
These are some of the scripts that the website use. I think you will need to import the required JQuery scripts that are used in this website.
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.tools.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/revslider/rs-plugin/js/jquery.themepunch.revolution.min.js?ver=4.6.5'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/themes/x/framework/js/dist/site/x-head.min.js'></script>
<script type='text/javascript' src='http://bluestarmultimedia.tv/wp-content/plugins/x-shortcodes/js/dist/site/x-shortcodes-head.min.js'></script>
Just test your code in Fiddle and it worked fine, maybe you need to specify more about what you really face with.
Or you could make div with link function by using span and z-index.
HTML
<div class="video-box">
<span></span>
</div>
more CSS
.video-box span {
position:absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
I think there is no problem with your code.It is working as you want.With This
<div class="video-box"></div>
And this
<div class="video-box"></div>
Here is JSFIDDLE
I have been doing web design for a little over a year now, but still have strange things happen on the front end sometimes. I am creating a simple template for personal use using the following code:
<!DOCTYPE html>
<html>
<head>
<title>Matt's Template</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/2.1.0/normalize.css" type="text/css" />
<link rel="stylesheet" href="CSS/general.css" type="text/css" />
</head>
<body>
<section class="container">
<h1>Matt's Template</h1>
</section>
<!-- Javascript Libraries -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js" ></script>
<!-- My Javscript -->
</body>
</html>
If I view this code in my Chrome browser, it appears that the body is shifted about 15px down from the html tag. However, my css explicitly tells the html and body tags to have no padding or margin. So why is there this space?? This has happened before and I am not really sure how I solved it. There must be some obvious answer. Here is my css too.
html, body {
height:100%;
width:100%;
padding:0;
margin:0;
}
.container {
height:100%;
width:960px;
position:relative;
margin:0 auto;
padding:0;
background:#E0E0E0;
}
The problem is that your <h1> still has its default margin, you have only taken off the default <body> margin of 8px, but not the other elements which have default UA styles. You should look into using a reset so you can 'start from scratch' for each element.
http://jsfiddle.net/qfSZ5/3/
Try adding
h1 {margin:0}
or
h1 {display:inline-block}
if you want to keep its margins inside the parent.
jsfiddle
That's because h1 has a default margin assigned by the browser; that could be kinda messy.
Some people just do this in order to prevent default margins and padding:
* {
margin: 0;
padding: 0;
}
And that literally means:
"Hi browser, please nullify all the defaults margins and padding on all the existing elements. Thanks!"