So pretty much, I have a container with two divs inside. I have each div set to float to different sides. One to the left and one to the right, now the issue I'm having is that since I have to set the height manually, it shifts the page like 10 pixels over from the original spot. So when I load a different page, it isn't lined up vertically. Here's the .gif of it and here's my code. This website is for my webdesign class. Thanks
https://imgur.com/a/h9dW7ib
index.html (page that's shifted over)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="container">
<div class="banner">
<img src="images/banner.png">
</div>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Parts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Cases
Motherboards
Processors
Graphics Cards
Storage
Power Supplies
RAM
Other
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Builds
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
<div class="contact" id="navright">
Contact
</div>
</div>
<div class="featured">
<div id="product_left">
<img src="images/featured.gif" id="featured_gif">
</div>
<div id="product_right">
awdaw
</div>
</div>
<div class="welcome">
<h1 class="welcome_header">Welcome</h1>
<p class="welcome_text">Here at Terry's Computers we are determined to make our customers experience as
stress free as possible. We will help every customer find the best deal possible
for their budget. Here we have computer parts such as motherboards, processors, and
more to offer. We also offer prebuilt computers that range from productivity, gaming,
or whatever the customer desires. We also take custom requests that can more suit our customers.
We can help you find the perfect computer that will satisfy your needs. If you have any
questions or suggestions head over to the Contact page and send us an email.</p>
</div>
<div class="footer">
<p class="footer_text">Yeet</p>
</div>
</div>
</body>
</html>
stylesheet.css
/*
Color Scheme
http://paletton.com/#uid=14x0u0k++k3ZJvC+Wpu+Zer+W78
*/
body{
background-color: #25004E;
margin: 0;
}
.container{
width: 960px;
margin: 15px auto;
}
.banner{
margin-top: 15px;
}
/* Navigation Menu */
.navbar {
margin-top: 15px;
border: 3px solid black;
border-radius: 10px;
overflow: hidden;
background-color: #333;
font-family: "Arial Black", Gadget, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #23004E;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #333;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
font-family: "Arial Black", Gadget, sans-serif;
text-align: left;
}
.dropdown-content a:hover {
background-color: #23004E;
}
.dropdown:hover .dropdown-content {
display: block;
}
.active{
background-color: #400089;
}
.featured{
margin-top: 15px;
background-color: #420089;
border: 3px solid black;
border-radius: 10px;
padding: 30px;
overflow: auto;
}
#product_left{
float: left;
width: 432px;
background-color: white;
border: 3px solid black;
border-radius: 10px;
padding: 13px;
}
#product_right{
float: right;
width: 432px;
background-color: #5201AA;
border: 3px solid black;
border-radius: 10px;
}
.welcome{
margin-top: 15px;
background-color: #420089;
border: 3px solid black;
border-radius: 10px;
height: 500px;
padding: 30px;
}
.welcome_header{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 25pt;
text-align: center;
}
.welcome_text{
font-family: "Arial Black", Gadget, sans-serif;
width: 800px;
text-align: justify;
margin: 30px auto;
text-indent: 50px;
font-size: 13pt;
}
.footer{
margin-top: 15px;
border: 3px solid black;
border-radius: 10px;
background-color: #333;
}
.footer_text{
font-family: "Arial Black", Gadget, sans-serif;
font-size: 10pt;
text-align: center;
color: white;
}
and finally, my news.html (page that's in the original position)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style/stylesheet.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="container">
<div class="banner">
<img src="images/banner.png">
</div>
<div class="navbar">
Home
News
<div class="dropdown">
<button class="dropbtn">Parts
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Cases
Motherboards
Processors
Graphics Cards
Storage
Power Supplies
RAM
Other
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Builds
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
Placeholder
</div>
</div>
<div class="contact" id="navright">
Contact
</div>
</div>
<div class="footer">
<p class="footer_text">Yeet</p>
</div>
</div>
</body>
</html>
It is a normal behavior and a famous question. It is because the content of one of your page is bigger than the screen and the other content page is not bigger than the screen. It cause the scrollbar on the right side to appears and disappear depending of the page.
You can fix it like that :
/* One of these two solutions at the beginning of your css file */
html { overflow-y: scroll; } /* Will display the bar all the time */
/* OR */
html { margin-left: calc(100vw - 100%); }
See : https://css-tricks.com/elegant-fix-jumping-scrollbar-issue/
It is caused because of the scrollbar appearing on the index page and
not appear on the news page.
When you give a static height you intentionally cause a scrollbar to appear and width of the page appear to be same then. Everything is normal in this case.
If you really obsessed to make them identical, either insert enough
content to news page to make a scroll appear or calculate the widths
more precisely(use % instead of px, em, rem).
Related
I recently started to make a web-server, I'm usually working with back-end code, but now I got a project to do. I'm still very green on CSS and HTML. So basically I need to somehow move the bank logo down and the Label - "Maze bank of Los-Santos" a bit closer to the logo, I have researched a lot of, but I still don't understand the working principle of the position, width, display, margin, top sometimes work, sometimes doesn't, at some times I use right, left positioning, but at this point I don't know how to do it.
This is how my website looks:
My index code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="/static/style2.css">
<title>Maze bank - Log In</title>
<link rel="icon" href="https://i.ibb.co/hm8Fz83/bank.png">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Calistoga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Teko&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton&display=swap" rel="stylesheet">
</head>
<body>
<br>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span style="color:white">Maze Bank Of </span>Los-Santos</p>
<form action="http://127.0.0.1:8080/api/test?category=computers" method="POST" target="_blank">
<div class="login-box">
<div class="textbox">
<i class="fa fa-credit-card" aria-hidden="true"></i>
<input type="password" placeholder="Bill Number" name="bill" value="" maxlength="15" minlength="15" >
</div>
<div class="textbox">
<i class="fa fa-key" aria-hidden="true"></i>
<input type="password" placeholder="Pincode" name="pin" value="" maxlength="4" minlength="4">
</div>
<button class="link">Forgot password ?</button>
<input class="btn" type="submit" name="" value="Log in">
</form>
</div>
<div class="copyright">
<h4>©™ 2019 Copyright All Rights Reserved</h4>
</div>
</body>
</html>**strong text**
Here's my CSS Code:
#import "https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
p{
display:block;
color: #2ECC71;
font-family: 'Teko', sans-serif;
font-size: 50px;
text-align: center;
font-weight: bold;
border-block: 2px solid black;
text-shadow: 2px 2px #1a1111;
}
p:first-letter{
display:block;
/*adjust the letter position for best appearance*/
margin:4px 4px 0 5px!important;
/*set font family color and size*/
color:#2ECC71;
font-size:1.5em;
font-family: 'Teko', sans-serif;
}
img{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
}
html, body{
margin: auto;
background: white;
background: url(https://external-preview.redd.it/ar2z7yTm97BFzRtPJXWA_twAbm-DlDKUt3mS0R8aJtY.png?auto=webp&s=c965a508182b77fbdec96dd82d6ed224a3b17543) no-repeat fixed center;
}
.logo{
font-family: fantasy;
}
.login-box{
width: 280px;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.textbox{
width: 100%;
overflow: hidden;
font-size: 20px;
padding: 8px 0;
margin: 8px 0;
border-bottom: 1px solid #e16a74;
}
.textbox i {
width: 26px;
float: left;
text-align: center;
}
.textbox input{
border: none;
outline: none;
background: none;
color: white;
font-size: 18px;
float: left;
width: 80%;
margin: 0 10px;
}
.btn{
width: 100%;
background: #e16a74;
border: 2px solid #e16a74;
margin: 12px 0 ;
cursor: pointer;
font-size: 18px;
padding: 5px;
color: white;
}
.btn {border-radius: 12px;}
.copyright {
position: absolute;
width: 100%;
color: #fff;
line-height: 40px;
bottom:0;
}
.copyright h4{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 10;
text-align: center;
}
.login-box button.link
{
background:none;
border:none;
color: wheat;
font-family: 'Teko', sans-serif;
font-weight: normal;
font-size: 20px;
position:relative;
bottom:1000%;
left:55%;
}
Firsts, check your code to be valid :) For example, <img> element should not have a closing tag. You should always try to have valid html because html with errors can affect rendering in browsers.
Secondly, I see that you added a <br> after <body> and before <img>. Possibly this is to make a small margin above the logo. Don't do that because this way you will never get a reliable distance from the top across browsers. Remove <br> and use margin-top: 16px or so style in your css for img.
Next, give a css class to your p element, like <p class="bank-name"> and style it in css:
.bank-name {
color: white;
margin-top: 10px;
}
This p is very specific, so you should give it a dedicated class because you can have other <p>s on the page that do not need the same appearance.
Two more things:
Avoid inline styles in html.
Do not use !important unless you have a huge reason to do it.
Also <p> is block by default, so you do not need that display: block in html. You can often find default styles at W3school.
Hope, this helps!
You just need to have a div tag to regroup your image and text. That div must have display: block so that the text won't be on the same line, but under. Now depending of the width of the image, you will probably need to align the text with text-align: center
You can read more about css rules on w3Schools
img {
display: block;
text-align: center;
}
<div>
<img src="https://i.ibb.co/hm8Fz83/bank.png"></img>
<p><span>Maze Bank Of </span>Los-Santos</p>
</div>
body {
background-image: url("https://wallpapertag.com/wallpaper/full/8/5/a/157291-vertical-minecraft-shaders-background-1920x1080-ios.jpg");
}
.title {
font-size:50px;
font-family: 'Raleway', sans-serif;
position: absolute;
color: white;
left: 790px;
}
.title {
position: relative;
}
.text {
color: white;
font-family: 'Work Sans', sans-serif;
font-size: 30px;
line-height: 10px;
}
.nfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black|50%;
}
.sfa {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:100px;
margin-top: 65px;
background-color:black;
}
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
margin-left:750px;
margin-bottom: 500px;
background-color:black;
position: absolute;
}
.text-desc {
color:white;
font-family: 'Work Sans', sans-serif;
font-size: 15px;
}
.buttonnfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonsfa {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonof {
background-color: #09ebf7;
border: none;
color: white;
padding: 10px 100px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top:15px;
font-family: 'Work Sans', sans-serif;
}
.buttonnfa:hover{
background-color:#05a2aa;
}
.buttonsfa:hover{
background-color:#05a2aa;
}
.buttonof:hover{
background-color:#05a2aa;
}
<!doctype html>
<html>
<head>
<title> SpeedyAlts </title>
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
</head>
<body>
<div class='bg'>
<a class="title"> SpeedyAlts </a>
<div class="nfa">
<center>
<a class="text"> NFA Account </a>
<br>
<br>
<a class="text-desc"> Minecraft accounts with security questions which you can use to log in and play on. </a>
</center>
<a class="buttonnfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="sfa">
<center>
<a class="text"> SFA Account </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonsfa" data-selly-product="a0f2e42d"> Purchase </a>
</div>
<div class="of">
<center>
<a class="text"> Optifine Cape </a>
<br>
<br>
<a class="text-desc"> A Minecraft account without security questions with the ability to change username, skin and password. </a>
</center>
<a class="buttonof" data-selly-product="a0f2e42d"> Purchase </a>
</div>
</div>
<script src="https://embed.selly.gg"></script>
</body>
</html>
I have got no idea why it is not working. For some reason with margin-top margin-left etc. It's not moving it up nor down with any of the margins. Could Anyone help? I am not that good at HTML nor with CSS so excuse any code that is badly formatted if there is any. Also, if anyone could give me any advice on problems like this in the future that would be helpful. Thanks.
Your div in question has position:absolute. You will need to either remove this, or use top and bottom, left and right to move it on the page. In your example, if you'd like to move the element up on the page you will need to declare:
.of {
width: 250px;
border: 1px solid white;
padding: 75px;
margin: 10px;
background-color:black;
position: absolute;
left:750px;
bottom: 500px;
}
Please keep in mind this means your element will always be 500px from the bottom and 750px from the left. It is better to use percentage values.
To move it up, you can try one of these to the class .of :
Margin approach
margin-top:-50px;
Absolute positioning approach
top: 300px; //change this value as needed
Transform approach
transform:translateY(-50px);
HTML & CSS question: For this assignment we are not supposed to use floats, but instead only use block, inline-block, and inline. Even though I have set the side-bar div to inline block, and the main-content div to inline-block, and the width less then the wrapper width, It is not aligning left and right. Can anyone please help me understand what I need to fix.
I know this is a lot of code to put in here, but I am not sure what I need to put in, and what I don't. I looked around and tried to find an answer but if this question has already been asked and solved please reference me. Thanks.
Google drive of the html and css (sorry to have to send the whole file, I was not sure what it was so I decided to attach the whole html and css file.)
Try this
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Word Stream</title>
<meta name="description" content="Pay per click search marketing software offers a means for accomplishing two core requirments for PPC optimization"/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<!-- Header (Logo and Nav) -->
<div id="header">
<div id="nav">
<ul>
<li>Products</li>
<li>|</li>
<li>Products</li>
<li>|</li>
<li>Blog</li>
<li>|</li>
<li>Support</li>
<li>|</li>
<li>AdWords Grader</li>
</ul>
<form id ="login">
<label>
<button class="button" type="button">Login</button>
</label>
</form>
</div>
<div id="logo">
<img src="logo.png" alt="Logo">
<span id="word">Word</span>
<span id="stream">Stream</span>
</div>
</div>
<!-- Main content section -->
<div id="main-page">
<div id="banner">
<h1>WordStream Internet Marketing Software</h1>
</div>
<!-- main side of page -->
<!-- Side bar (info and Advertisment) -->
<div id="side-bar">
<div id="side-bar-content">
<h1>Wordstream for PPC</h1>
<h2>Drive More Profits Through PPC!</h2>
<p>Get Started with <span class="blue">Wordstream</span>'s Powerful PPC Platform Today</p>
<form>
<label>
<button class="button1" type="button">SCHEDULE DEMO</button>
</label>
<label>
<button class="button2" type="button">FREE TRIAL</button>
</label>
</form>
<p class="center">(No Credit Card Required)</p>
</div>
<!-- side bar ad -->
<div id="side-bar-ad">
<div id="wrap-img-text">
<h3>How does your adWords performance measure up?</h3>
<p>Get a free, instant report with the WordStream Adwords Performance Grader</p>
<form>
<label>
<button class="graded" type="button">Get Graded Today</button>
</label>
</form>
</div>
<img class="img" src="left_content_ad1.png" alt="Oops, your browser isn't showing this image.">
</div>
</div>
<div id="handle">
<div id="upper-bar">
<img class="inline" src="home_button.png" alt="home">
<span class="blue">PPC</span>
<!-- contact info and phone pic -->
<div id="contact" class="inline">
<img class="inline phone" src="phone.png" alt="phone">
<!-- text only -->
<div class="inline">
<p class="top">
<span class="hours">Mon - Fri 9 a.m. - 5 p.m. (EST)</span>
<br>
<span class="number">855.967.3787</span>
<br>
<span class="int-number">International: +1.617.963.0555</span>
</p>
</div>
</div>
</div><br/>
<!-- main content starts here -->
<div id="main-content">
<h1>PPC - Achieve More Efficiant Pay-Per CLick (PPC) Marketing</h1>
<p><span class="bold">PPC</span>(pay-per click) search marketing software offers a means for accomplishing two core requirements for PPC optimization:</p>
<ul>
<li>
<span class="bold">PPC Automation</span>-While it would be impossible (and inadvisable!) to automate every aspect of pay-per-click advertising, automating away redundant, time-consuming tasks affords you a means of increasing productivity. Often, this means being able to produce an amount of work that would otherwise have been unachievable for you and your business.
</li>
<li>
<span class="bold">PPC Management</span>-PPC management refers to the maintenance and prioritizing of paid seach marketing tasks. Being able to oversee various aspects of your account while assigning each item on a seemingly endless to-do list an appropriate value can make or break an online ad campaign.
</li>
</ul>
<p>
WordStream's PPC software is specifically designed to aid in these two PPC search engine marketing areas. This page will show you both the processes the software is automating for you, and the best course of action to take where workflow is concerned.
</p>
<!-- Bordered *Trial* box with logo and button -->
<div id="trial-box">
<img src="content_ad.png" alt="ad">
<div class="text-button">
<h3>Drive More Profits Through PPC - Try Our Platform FREE</h3>
<p>Get instant access to WordStream's innovative <span class="bold"> Quality Score</span> and <span class="bold">Account Management</span> tools through our <span class="bold"> FREE 7-day Trial</span>. Risk Free, No Credit Card Required and No Automatic Signups.</p>
<form>
<label>
<button class="get-started" type="button">Get Started Today!</button>
</label>
</form>
</div>
</div>
<!-- under the trial box -->
<h2>Automation And Your PPC Search Campaign</h2>
<p>Another two lines of text that I really dont feel like copying. Soooo much text to copy, not worth it. Im just writing this instead to fill in the space.</p>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
*{
margin: 0px;
padding: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#wrapper{
width: 1000px;
margin: 0px auto;
}
/*HEader things*/
#header{
width: auto;
position: relative;
height: 100px;
}
#logo{
display: block;
text-align: left;
position: absolute;
bottom: 0px;
}
#logo img{
vertical-align: text-bottom;
width: 50px;
}
#word{
color: grey;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#stream{
color: blue;
font-family: Tahoma, Geneva, sans-serif;
font-size: 35px;
}
#nav{
display: block;
margin: 10px 30px;
position: absolute;
right: 0px;
}
#nav ul{
display: inline-block;
background-color: #F0F0F0;
border-radius: 5px;
padding: 0px 10px 5px;
padding-bottom: 7px;
}
#nav li{
display: inline-block;
font-size: 12px;
vertical-align: middle;
}
#login{
display: inline-block;
margin-left: 20px;
}
.button{
width: 60px;
height: 25px;
background-color: blue;
border-radius: 5px;
border: 0px;
color: white;
}
/*Banner right under header*/
#banner{
background-color: blue;
padding: 5px 10px;
margin: 15px 0px;
font-size: 10px;
box-shadow: 0px 50px 200px grey;
}
#banner h1{
color: white
}
/*sidebar*/
#side-bar{
display: inline-block;
width: 220px;
}
#side-bar-content{
border-bottom: 1px solid lightgrey;
margin-bottom: 10px;
padding-bottom: 10px;
}
#side-bar h1{
font-size: 15px;
color: blue;
}
#side-bar h2{
font-size: 12px;
color: darkred;
}
#side-bar p{
font-size: 11px;
}
.button1{
border: 0px;
background-color: blue;
color: white;
width: 220px;
padding: 3px 0px;
margin-bottom: 3px;
border-radius: 5px;
}
.button2{
border: 0px;
background-color: orange;
color: white;
width: 220px;
padding: 3px 0px;
border-radius: 5px;
}
.center{
text-align: center;
}
/*Bottom half of sidebar*/
#side-bar-ad{
position: relative;
}
#wrap-img-text{
position: absolute;
left: 0px;
top: 0px;
padding: 10px;
}
#wrap-img-text h3{
font-size: 15px;
padding: 5px;
color: blue;
}
#wrap-img-text p{
padding: 3px;
}
.graded{
width: 180px;
background-color: darkblue;
color: white;
border-radius: 10px;
margin: 5px;
}
.img{
width: 210px;
height: auto;
}
.blue {
color: blue;
}
#handle{
vertical-align: top; display: inline-block;
}
/*Under the panel (phone number etc)*/
#upper-bar{
display: inline-block;
vertical-align: top;
position: relative;
width: 720px;
height: 110px;
border-bottom: 1px solid lightgrey;
}
#upperbar hr{
position: absolute;
bottom: 0px;
}
.inline{
display: inline-block;
vertical-align: top;
}
#contact{
position: absolute;
height: 110px;
right: 0px;
top: 0px;
}
.phone{
height: 70%;
width: auto;
}
.number{
color: blue;
font-family: Impact, Charcoal, sans-serif;
font-size: 45px;
}
.int-number{
font-size: 15px;
}
/*main content section*/
#main-content{
display: inline-block;
width: 700px;
vertical-align: top;
}
#main-content li{
list-style-type: square;
margin-left: 20px;
margin-bottom: 5px
}
#main-content h1{
font-size: 23px;
color: blue;
margin-bottom: 5px;
margin-top: 15px;
}
#main-content p{
margin-bottom: 5px;
margin-top: 15px;
}
.bold{
font-weight: bold;
}
#trial-box{
border: 5px solid blue;
padding: 10px;
}
#trial-box img{
display: inline-block;
vertical-align: top;
}
.text-button{
display: inline-block;
width: 600px;
vertical-align: top;
}
h3{
color: blue;
}
.get-started{
background-color: limegreen;
color: white;
border-radius: 5px;
border: 0px;
width: 150px;
padding: 5px;
}
h2{
color: blue;
font-size: 17px;
margin-top: 10px;
}
Output:
Check out this Fiddle
EDIT:
Q:Why the code didn't work before?
A:
Weebly Menus and logos
So I have been reading everywhere that I can think of online to fix an issue with logo and navigation being on the same line. And yes I have attempted the other articles on Stackoverflow.
I have changed lines of code, added lines of code and it moves things around but refuses to put them on the same lines.
The code is this:
/* LOGO & MENU */
#header{
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.navContainer{
width: 500px;
height: auto;
background: url('navbg.jpg') repeat;
text-align: right;
display: inline;
overflow: hidden;
}
.logo {
width: 200px;
min-height: 20px;
height: auto;
margin: none;
float: left;
display: inline;
}
span.wsite-logo {line-height: 1;}
#logo, #logo a, #wsite-title {
color: #2a2a2a !important;
text-decoration: none !important;
font-family: "Open Sans", sans-serif;
font-size: 44px;
font-weight: lighter;
font-weight: 300;
line-height: 1;
}
/* Navigation Menu */
#navigation{
float: right;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 100px;
display:inline;
overflow: hidden;
}
#navigation a, #icontent #navigation li:last-child a{
display:inline-block;
text-decoration:none;
line-height: 1;
padding: 20px 16px;
border-right: 1px solid #eee;
}
#navigation li:last-child a, #icontent #navigation span:last-child li a{border-right: none;}
#navigation ul{margin: 0; list-style: none;}
#navigation li{display:inline;}
#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 0; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { width: 162px; text-align: left; margin-top: 2px;}
#weebly-menus .weebly-menu li a {
border: none;
display: block;
background-color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: normal;
line-height:1;
padding: 5px 0px;
color: #000;
font-family: Helvetica, sans-serif;
width: 160px;
height: auto;
border: 1px solid #eee;
}
#weebly-menus .weebly-menu-wrap, #wsite-menus .wsite-menu-wrap {
z-index: 5000;
margin: 0;
postiion: relative !important;
}
Please help. I am wanting to learn more but do you ever get to the point where your brain is just fried from trying different what you hope are solutions, and it turns out not to work. THAT IS WHERE I AM RIGHT NOW!!!!
The link to the site is this :Site preview
Also I am having trouble putting simple text to the right of the navigation.
The HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class='tall-header wsite-theme-light'>
<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>
<div id="wrapper">
<div id="bar">
<div class="frame clearfix">
<div class="bar-text"><p>{call:text}</p></div>
<div id="search-button"><i class="af-search"></i></div>
<div class="social-frame">{social}</div>
<div class="search-bar">{search}</div>
</div>
</div>
<header id="header">
<div class="navContainer clearfix">
<div class="logo med-padding">{logo}</div>
<nav><div id="navigation">{menu}</div></nav>
</div>
<div class="sliderContainer">
<div id="tall-header-image" class="wsite-header"></div>
</div>
</header>
<div id="main" role="main">
<div class="frame">
<div class="content large-padding">{content}</div>
</div>
</div>
<footer>
<div id="footer" class="large-padding clearfix">
<div class="frame">
<div class="note" style="text-align: center;"><p>Drag & drop footer content here</p></div>
<div id="footer-content" class="med-padding">{bottom:content} </div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
</div>
</div>
<div id="footer-bottom" class="feature small-padding">
<div class="frame">
<div class="copyright"><p>{copyright:text}</p></div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/files/theme/basic-header.js"></script>
</body>
</html>
Place the span.wsite-logo class directly under the nav tag, after that change the span class in a div class and add a float: left to the class .wsite-logo.
remove logo div class logo med-padding.
Some advice that worked!!
Line 120 of css, in the #navigation, change text align right to center to move it horizontally, or add margin-top: 3%; to move it vertically, or both, or various other combinations.
navigation {
text-align: center;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
float: none;
margin-top: 3%;
I created this website http://fusioninfinite.com/DianeFH/ with the hope that it would display correctly on mobile devices. While it looks fine on my PC I have tested it on my IPod and the header, navbar, and footer background colors do not extend to the rest of the page when you scroll. I think it's a problem with the width being 100% but I am not sure
This is my HTML code I am using bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Diane Swanson's website, online gallery and blog">
<meta name="author" content="Diane Swanson">
<meta name="keywords" content="diane, swanson, Diane Swanson, artist, freehawk art, art, freehawk, watercolor, visual artist, American Women Artists, artist, painting, landscapes">
<link rel="icon" href="../../favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<title>Diane Swanson - Home</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="blog.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../../assets/js/ie-emulation-modes-warning.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../../assets/js/ie10-viewport-bug-workaround.js"></script>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div style="width:100%; background-color:#303030; class="blog-masthead">
<div align="center" style="width:100%; height:120px; background-color:#0b0b3b;">
<div style="width:740px; padding-top:40px;" align="left">
<h1 style="font-size:45px; font-family: 'Muli', sans-serif; color:lightgrey;">Diane Swanson</h1>
</div>
</div>
<div style="width:790px;" align="left" class="container">
<nav class="blog-nav">
<a class="blog-nav-item active" href="index.html">Home</a>
<a class="blog-nav-item" href="about.php">About</a>
<a class="blog-nav-item" href="exhibits.html">Current & Upcoming Exhibits</a>
<a class="blog-nav-item" href="portraits.html">House Portraits</a>
<a class="blog-nav-item" href="gallery.html">Gallery</a>
<a class="blog-nav-item" href="wordpress/index.php">Blog</a>
</nav>
</div>
</div>
<div class="container">
<div style="margin-top:20px;" align="center">
<img src="images/homeheader.jpg">
<br><br><br>
<h2 style="float:left; color:#000066;"><strong>DIANE SWANSON</strong></h2>
<h2 style="float:right; color:#000066; font-style: italic;">visual artist</h2>
<br><br><br>
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
<br><br><br>
</div>
</div><!-- /.container -->
<div style="left:0; right:0;" class="blog-footer">
<p>Website designed and hosted by FusionInfinite WebDesign and Hosting</p>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/docs.min.js"></script>
</body>
</html>
This is my CSS:
/*
* Globals
*/
body {
font-family: Georgia, "Times New Roman", Times, serif;
color: #555;
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
color: #333;
}
/*
* Override Bootstrap's default container.
*/
.container {
width: 790px;
}
/*
* Masthead for nav
*/
.blog-masthead {
background-color: #428bca;
-webkit-box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
box-shadow: inset 0 -2px 5px rgba(0,0,0,.1);
}
/* Nav links */
.blog-nav-item {
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
}
.blog-nav-item:hover,
.blog-nav-item:focus {
color: #fff;
text-decoration: none;
}
/* Active state gets a caret at the bottom */
.blog-nav .active {
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
/*
* Blog name and description
*/
.blog-header {
padding-top: 20px;
padding-bottom: 20px;
}
.blog-title {
margin-top: 30px;
margin-bottom: 0;
font-size: 60px;
font-weight: normal;
}
.blog-description {
font-size: 20px;
color: #999;
}
/*
* Main column and sidebar layout
*/
.blog-main {
font-size: 18px;
line-height: 1.5;
}
/* Sidebar modules for boxing content */
.sidebar-module {
padding: 15px;
margin: 0 -15px 15px;
}
.sidebar-module-inset {
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
}
.sidebar-module-inset p:last-child,
.sidebar-module-inset ul:last-child,
.sidebar-module-inset ol:last-child {
margin-bottom: 0;
}
/* Pagination */
.pager {
margin-bottom: 60px;
text-align: left;
}
.pager > li > a {
width: 140px;
padding: 10px 20px;
text-align: center;
border-radius: 30px;
}
/*
* Blog posts
*/
.blog-post {
margin-bottom: 60px;
}
.blog-post-title {
margin-bottom: 5px;
font-size: 40px;
}
.blog-post-meta {
margin-bottom: 20px;
color: #999;
}
/*
* Footer
*/
.blog-footer {
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
.blog-footer p:last-child {
margin-bottom: 0;
}
To make your website responsive, you are using Bootstrap, which is great, but you are using it incorrectly. By overwriting bootstrap's default CSS, it will only break it, as I said earlier. What you want to do is include your own DIVs or custom classes and apply the CSS to these.
Speaking of CSS, I would recommend to avoid inline CSS, in the style attribute, and to regroup all your CSS in a single stylesheet. It will be easier for you to edit your website afterwards. In my example, I added a lot of custom classes.
Also, don't use BR tag, except to break a line for text inside a P tag. In order to define spaces around an element, use MARGIN or PADDING
Next, I noticed that you compressed your website's content, or content container in this case to 790px. Nowadays, most screen resolution tends to be between 1920px and 1280px, excluding mobile and tablet resolution of course. By compressing, you are: 1) breaking bootstrap, 2) containing your content to the middle of the page and therefore leaving huge empty gaps to each sides for users with higher resolution screens.
Using bootstrap is great, but using it efficiently is better. Don't be afraid to use bootstrap to it's full potential. When looking at my take on the Html, notice how I abused DIV containers and added all of boostrap's own row and columns DIVs. When resizing the browser window, you will notice that all elements will follow and place itself on top of each other when there is no more room for elements to be side by side.
In the stylesheet, I added a bit of Media Queries. What this do is simple, it checks if the browser's width reached the threshold I specified. If it does, the I can target specific elements and apply additional CSS style. If the browser's width returns to normal, the additional CSS is removed.
For some reason unknown, I cannot create a Bootply example for you at the moment. But you can try to test it by adding my code and click Play to see how it looks and react to resizing. Bootply Website
If you have any questions, don't hesitate
Here is the complete html:
<div class="header">
<div class="container name-container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h1>Diane Swanson</h1>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<nav class="blog-nav">
<ul>
<li><a class="blog-nav-item active" href="#">Home</a></li>
<li><a class="blog-nav-item" href="#">About</a></li>
<li><a class="blog-nav-item" href="#">Current & Upcoming Exhibits</a></li>
<li><a class="blog-nav-item" href="#">House Portraits</a></li>
<li><a class="blog-nav-item" href="#">Gallery</a></li>
<li><a class="blog-nav-item" href="#">Blog</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="blog-img" src="http://fusioninfinite.com/DianeFH/images/homeheader.jpg" alt="">
</div>
</div>
</div>
<div class="container middle-container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 leftbox">
<h2>Diane Swanson</h2>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 rightbox">
<h2>Visual artist</h2>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 description-container">
<h4>Landscapes — Home/Building Portraits — Animal Portraits — Illustration</h4>
</div>
</div>
</div>
</div>
<div class="blog-footer">
<p>Website designed and hosted by FusionInfinite WebDesign and Hosting</p>
</div>
Here is the CSS:
.header{
width: 100%;
background-color: #303030;
}
.header h1{
font-size: 45px;
font-family: 'Muli', sans-serif;
color: lightgrey;
margin-left: 8px;
}
.name-container{
padding-top: 25px;
}
.blog-nav ul{
margin: 0;
padding: 0;
}
.blog-nav li{
float: left;
}
.blog-nav-item{
position: relative;
display: inline-block;
padding: 10px;
font-weight: 500;
color: #cdddeb;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
}
.blog-nav-item:hover{
text-decoration: none;
color: #FFF;
}
.active{
color: #fff;
}
.blog-nav .active:after {
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
vertical-align: middle;
content: " ";
border-right: 5px solid transparent;
border-bottom: 5px solid;
border-left: 5px solid transparent;
}
.blog-img{
max-width: 100%;
width: 1170px;
}
.content-container{
padding-top: 25px;
padding-bottom: 65px;
}
.middle-container{
padding-top: 10px;
}
.description-container{
text-align: center;
padding-top: 10px;
}
.leftbox h2{
color: #000066;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
.rightbox h2{
float: right;
color: #000066;
font-style: italic;
}
.blog-footer{
padding: 40px 0;
color: #999;
text-align: center;
background-color: #f9f9f9;
border-top: 1px solid #e5e5e5;
}
/*MEDIA QUERIES*/
#media only screen and (max-width:770px) {
.rightbox h2{
float: none;
}
}
#media only screen and (max-width:585px) {
.blog-nav li {
float: none;
}
.blog-nav .active:after{
display: none;
}
}