I don't know how to solve this problem. I have menu with height: 72px and logo with height: 117px. The logo is still with height: 72px. I do responsive design. I can make it with margin positioning, but I think this is not good for responsive.
Picture
Any ideas how to solve it? Thanks a lot
#font-face{font-family: Exo-Bold; src:url(../fonts/Exo-Bold.otf);}
#font-face{font-family: Exo-Light; src:url(../fonts/Exo-Light.otf);}
body
{
background-color: white;
width: 100%;
margin: 0 auto;
}
a
{
text-decoration: none;
}
a:link, a:visited
{
color: white;
}
a:hover, a:active
{
color: white;
text-decoration: underline;
}
.header
{
background-image: url(../images/bg-img.png);
background-repeat: repeat-x;
height: 72px;
width: 100%;
}
.header .nav
{
height: 72px;
margin-left: 15%;
}
.header .nav ul
{
margin: 0 auto;
list-style-type: none;
}
.header .nav ul li
{
float:left;
display: inline-block;
font-family: Exo-Bold;
font-size: 14px;
margin: 25px 20px;
}
.logo
{
background-image:url(../images/logo.png);
background-repeat: no-repeat;
height: 117px;
width: auto;
margin-left: 10%;
}
Related
My site is fine until I go lower than 723px wide then a white margin appears on the right side of all of my background colors. I have tried to go in and delete margins and padding to see where I have gone wrong. I also played with the width of the elements and it just stretches the image over the visible portion when I set the image to full. I've inspected the page and can not define the white space on the page and where it comes from.
I also tried adding display:inline-block; to my css background divs as well as setting the width: 100%.
CSS
body {
margin: 0;
font-family: 'Comic Neue', sans-serif;
}
main {
margin-top: none;
}
.hero_image {
background-image: url("C:/Users/Kascey.Malone/Documents/Websites/Midterm/images/669.png");
height: 100vh;
width: 100%;
position: relative;
background-size: 100% 100%;
display:inline-block;
}
/*NAVIGATION BAR*/
header {
height: fit-content;
}
header a {
font-weight: bold;
color: #FCD90A;
}
header a:link {
text-decoration: none;
}
header a:visited {
text-decoration: none;
}
header a:hover {
text-decoration: underline;
}
header a:active {
text-decoration: underline;
}
.topnav {
overflow: hidden;
text-decoration: none;
}
.left {
padding: 20px;
float: left;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: left;
}
.right {
padding: 20px;
float: right;
width: 50%;
box-sizing: border-box;
text-decoration: none;
text-align: right;
}
/*HERO BOX*/
.hero {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.hero h1 {
font-size: 15vw;
margin: 0;
text-align: center;
color: #9A1000;
font-style: italic;
}
.hero button {
padding: 1em;
margin-top: 10vh;
background-color: #FCD90A;
white-space: nowrap;
font-size: 1vw;
font-family: 'Comic Neue', sans-serif;
}
.hero button a{
text-decoration: none;
color: black;
}
.hero button a:link {
text-decoration: none;
}
.hero button a:visited {
text-decoration: none;
}
.hero button a:hover {
font-weight: bold;
}
.hero button a:active {
font-weight: bold;
}
.container {
position: relative;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/*MENU TABLE*/
.table {
background-color: white;
padding-top: 100px;
padding-bottom: 100px;
box-sizing:border-box;
}
table {
margin-left: auto;
margin-right: auto;
padding: 40px;
font-size: 1vw;
background-color: white;
border: solid 8px black;
box-sizing:border-box;
}/*Add border.*/
thead {
text-align: right;
}
td:nth-child(even) {
text-align: left;
padding-left: 100px;
}
td:nth-child(odd) {
text-align: right;
padding: 10px;
}
.row {
display: flex;
margin: 0 auto;
}
table a{
text-decoration: none;
color: black;
} /*Change color based off background*/
table a:link {
text-decoration: none;
}
table a:visited {
text-decoration: none;
}
table a:hover {
text-decoration: underline;
}
table a:active {
text-decoration: underline;
}
th {
padding: 10px;
}
/*ABOUT TEXT*/
.about {
height: auto;
padding-top: 5vh;
padding-bottom: 5vh;
background-color: #3823FC;
background-size: 100% 100%;
}
.column {
flex: 50%;
padding: 10px;
}
.column h2{
font-size: 2vw;
padding-left: 200px;
color: white;
}
.column p{
padding-right: 200px;
padding-top: 88px;
font-size: 1.5vw;
color: white;
}
.column img {
width: 30vw;
padding-left: 200px;
height: auto;
}
/*FOOTER*/
.footer {
background-color: #0C026C;
padding: 10px;
text-align: left;
color: white;
}
Try to use percentages for your padding/margins. Your size is scaling based on screen size with the percentages used.
Another option could be using display: flex; with flex containers.
Here is a helpful document to get you started.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could also use #Media tags in CSS for different screen sizes to fit things manually. Here is a reference to get you started: W3 Schools Reference
I've been trying to make that website for YouTube views and like bot and the logo isn't clickable somehow.
navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: gray;
}
.navbar ul li {
float: left;
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bolbol.png);
width: 150px;
height: 100px;
text-indent: -1400px;
background-size: 100% 100%;
}
li:nth-child(2) {
position: relative;
top: 25px;
}
<div class="navbar">
<ul>
<li>Logo</li>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
https://jsfiddle.net/6L3jak0s/
I think what you are trying to do is to make things look like a header, it's better with flexbox. Something like this maybe..
.navbar {
display: flex;
background-color: gray;
margin: 0;
padding: 1rem;
justify-content:space-between;
align-items:center;
}
.navbar ul {
list-style-type: none;
display: flex;
align-items:center;
}
.navbar ul li {
margin-right: 50px;
font-weight: 600;
font-size: 20px;
color: white;
}
li:first-child {
background-image: url(bololo.jpg);
background-size: 100% 100%;
}
.navbar a {
display: block;
}
<div class="navbar">
Logo
<ul>
<li>Liorgay</li>
<li>Nevo King</li>
</ul>
</div>
Remove this property "text-indent: -1400px;" from this rule "li:first-child Rule".
and then add the following CSS.
.navbar li a {
width: 100%;
height: 100%;
display: inline-block;
text-indent: -1400px;
}
I am pretty new to web development. I have basic experience with html/css and am using bootstrap to create a website just to kind of teach myself. I want my image to cover the whole page which it does when i decrease the size of the browser but when using full screen it adds padding to the side.
full screen example
i have tried some things to fix it like changing padding to -20px or making overflow-x hidden but can't seem to fix it.
bootstrap code
<div id="banner" class="container-fluid">
<div class="col-lg-12 nopadding">
<img src="images/headercopy.jpeg">
</div>
</div>
css code
html, body {
line-height: 1.8;
background-color: rgb(0, 0, 0);
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
h3 {
text-align: center;
color: white;
}
.nav {
color: white;
}
.navbar-transparent .navbar-brand {
color: white; //nightalreadycolor
}
.navbar-collapse .page-scroll {
color: white; //nightalreadycolor
}
.navbar-transparent .navbar-brand:hover, .navbar-transparent .navbar-brand:focus {
background-color: transparent;
color: #c8e8f4; //light blue
}
.navbar .navbar-transparent .navbar-fixed-type {
background-color: red;
}
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
}
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.aboutimage {
background-size: 100% 100%;
}
img {
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
#about {
color: white;
height: 600px;
margin-right: 15px;
text-align: justify;
}
#about p {
display: block;
font-size: 20px;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
color: white;
}
#about p img {
padding-top: 5px;
outline: solid #f00 1px !important;
}
.container {}
#fleet {
border-right: thin solid black;
color: white;
width: 50%;
height: 600px;
float: left;
background-color: grey;
}
#fleet h1 {
text-align: center;
}
#fleet h2 {
padding-right: 10%;
float: right;
}
#rates {
color: white;
width: 50%;
height: 600px;
float: right;
background-color: #574951;
}
#rates h1 {
text-align: center;
}
#contact {
text-align: center;
height: 600px;
color: white;
background-color: #574951;
}
#reservation {
display: inline-block;
height: 600px;
color: white;
text-align: center;
}
Sorry if some of my code seems to be redundant or inefficient like i said I'm still very new to all of this. If there's any other information you need let me know.
Use images as a background. So if it's the #banner div that you want to fill up, your css will be like this:
#banner {
background-image: url('images/headercopy.jpeg');
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
Then you just have to use this markup:
<div id="banner" class="container-fluid"></div>
Of course you can set to your css code for the #banner the height you want etc.
This is basically the problem that I am facing now, http://jsfiddle.net/NCJeP/.
HTML
<nav>
<ul id="city-navigation">
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Coimbatore</li>
<li>Salem</li>
</ul>
</nav>
CSS
#city-navigation {
width: 100%;
position: relative;
left: 10px;
}
#city-navigation li a {
float: left;
font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
margin: 20px 20px;
color: #FFF;
}
#city-navigation li a:hover {
background-image: url(http://i.imgur.com/QVzKG.png);
background-repeat: no-repeat;
color: #000;
width: 116px;
height: 60px;
display: block;
text-align: center;
position: relative;
z-index: 4;
}
#city-navigation .active {
background-image: url(http://i.imgur.com/HbLa1.png);
background-repeat: no-repeat;
color: #000;
width: 116px;
height: 60px;
display: block;
text-align: center;
}
I can't seem to figure out how I can stop the text from moving to the right because of the extra width that the background image adds. I know there is enough space, I just want the image & text to be static.
If anyone can help out, I'd be very much thankful! =) Cheers!
The width on your hover is causing the jump. I moved it to the "a" tag and cleaned up the other code a bit as well:
#city-navigation li a {
float: left;
font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
margin: 20px 20px;
color: #FFF;
display: block;
text-align: center;
width: 116px;
height: 60px;
}
#city-navigation li a:hover {
background: url(http://i.imgur.com/QVzKG.png) no-repeat;
color: #000;
}
#city-navigation .active {
background: url(http://i.imgur.com/HbLa1.png) no-repeat;
color: #000;
}
Remove the width property from #city-navigation .active and #city-navigation li a:hover, which is causing the width to increase when you hover the list item.
Which will make your css code look like
body {
background-color: red;
}
#city-navigation {
width: 100%;
position: relative;
left: 10px;
}
#city-navigation li a {
float: left;
font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
margin: 20px 20px;
color: #FFF;
}
#city-navigation li a:hover {
background-image: url(http://i.imgur.com/QVzKG.png);
background-repeat: no-repeat;
color: #000;
height: 60px;
display: block;
text-align: center;
position: relative;
z-index: 4;
}
#city-navigation .active {
background-image: url(http://i.imgur.com/HbLa1.png);
background-repeat: no-repeat;
color: #000;
height: 60px;
display: block;
text-align: center;
}
Do it like this : My Fiddle
Thought I've not cleaned up for you but use inline-block and take out unnecessary margins around your navigation..
CSS
body {
background-color: red;
}
#city-navigation {
width: 100%;
position: relative;
left: 10px;
}
#city-navigation li a {
float: left;
font: 14px Rockwell, Georgia, Times, “Times New Roman”, serif;
margin: 20px 0px;
color: #FFF;
display: inline-block;
width: 116px;
text-align: center;
}
#city-navigation li a:hover {
background-image: url('http://i.imgur.com/QVzKG.png');
background-repeat: no-repeat;
color: #000;
width: 116px;
height: 60px;
display: inline-block;
text-align: center;
position: relative;
}
#city-navigation .active {
background-image: url('http://i.imgur.com/HbLa1.png');
background-repeat: no-repeat;
color: #000;
width: 116px;
height: 60px;
display: block;
text-align: center;
}
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.