there is a huge gap between my sections and I have no clue why i have tried adding padding in the form of #me { padding-bottom: 150px; } but i tried with different numbers and i see a difference when making the gap longer but when i try going negitive, it cant really seem to have an affect on whats actually going on.
here is my code for HTML
.container {
width: 100%;
height: 100%;
background: #12182b;}
.me-section {
text-align: left;
padding-left: 850px;
height: 100vh;
margin-top: 320px;}
.me-section h1 {
color: #6dffe7;
font-size: 20px;
margin: 0px;}
.about-section {
text-align: left;
padding-left: 850px;
height: 100vh;
margin-top: 320px;}
.about-section h1 {
color: #6dffe7;
font-size: 20px;
padding-top: 150px;}
<div class="container">
<img src="logo.png" class="logo">
<div class="header">
<nav class="navbar">
<ul>
<div class="download-btn">
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</div>
</ul>
</nav>
<section id="me">
<div class="me-section">
<h1 class="my-name-after">Hi, my name is</h1>
<h2 class="header-name">Alberto Aday.</h2>
<h2 class="header-rest">I build on the web.</h2>
<p>I'm an aspiring software engineer. I like to build<br>websites. Back-end development is currently <br>progress.</p>
</div>
</section>
<section id="about">
<div class="about-section">
<h1>About me.</h1>
</div>
</section>
<section id="work">
<div class="work-section">
<h1>Work</h1>
</div>
</section>
<section id="contact">
<div class="contact-section">
<h1>Contact</h1>
</div>
</section>
</div>
I went ahead and removed the massive margins, which yes, did change the position of where things were but also created a ton of whitespace.
.container {
width: 100%;
height: 100%;
background: #12182b;}
.me-section {
text-align: left;
padding-left: 850px; }
.me-section h1 {
color: #6dffe7;
font-size: 20px;
margin: 0px;}
.about-section {
text-align: left; }
.about-section h1 {
color: #6dffe7;
font-size: 20px;}
<div class="container">
<img src="logo.png" class="logo">
<div class="header">
<nav class="navbar">
<ul>
<div class="download-btn">
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>Resume</li>
</div>
</ul>
</nav>
<section id="me">
<div class="me-section">
<h1 class="my-name-after">Hi, my name is</h1>
<h2 class="header-name">Alberto Aday.</h2>
<h2 class="header-rest">I build on the web.</h2>
<p>I'm an aspiring software engineer. I like to build<br>websites. Back-end development is currently <br>progress.</p>
</div>
</section>
<section id="about">
<div class="about-section">
<h1>About me.</h1>
</div>
</section>
<section id="work">
<div class="work-section">
<h1>Work</h1>
</div>
</section>
<section id="contact">
<div class="contact-section">
<h1>Contact</h1>
</div>
</section>
</div>
The issue is your height:
.me-section {
text-align: left;
padding-left: 850px;
height: 100vh; /* <-------------- */
margin-top: 320px;
}
Changing it to 50 or 60 it looked a lot better!
Related
I am trying to make my own web page.
so what i want is text on left and image on right.
problem 1: image will not change the size to 300px
problem 2: i am trying to have the image on the right side, I tried using float and it did not work.
p,
h1 {
margin: 0px;
padding: 0px;
}
.top {
margin-left: 20%;
}
.top img {
float: right;
margin-right: 35%;
width: 300px;
height: 300px;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting my page.
</p>
<br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
Try this:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
}
.words, .list{
width: 100%;
}
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</div>
try this code:
p,h1{
margin: 0px;
padding: 0px;
}
.top{
height: auto;
background-color: aqua;
padding: 20px;
display: inline-block;
width: 100%;
}
.top img{
float:right;
width:300px;
height:300px;
}
<body>
<div class="top">
<div class="image">
<img src="myimage.jpg">
</div>
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
</ul>
</div>
</body>
The image gets 300px width, but for making it better add a .image class in your css. Use flex display instead of using float. to set your image on right you can simply add rtl direction to div with top class or put it after div with word class.
p,h1{
margin: 0px;
padding: 0px;
}
p,h1{
margin: 0px;
padding: 0px;
}
.top{
display: flex;
justify-content: center;
align-items: center;
}
.top .image img{
width:300px;
height:300px;
}
<div class="top">
<div class="words">
<h1>Welcome</h1>
<p>My name is Jamie Smith<br>I am a student at CSUN<br><br>Welcome, and thank you for visiting
my
page.</p><br>
<h1>Contact Info</h1>
<p>jamie.smith#csun.edu<br></p>
</div>
<div class="list">
Pages:
</div>
<div class="image">
<img src="http://simpleicon.com/wp-content/uploads/user1-256x256.png" />
</div>
</div>
I want my navigation links to be centered in my fixed navigation bar i tried to
adding padding but somehow the navigation expands. Also i tried to vertical-align but that didn't do much. I am really new to CSS so explanations would be helpful in cases if this happened again
HTML
`<html>
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet"/>
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best
quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>`
CSS
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
padding-top: 30px;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float:right;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
I would use display: flex. It makes this really easy. Use align-items: center; to center vertically and justify-content: space-between to separate the logo from the nav. Then I would also float your nav li's left, so they're in order. You could use flex there, too, but isn't necessary.
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.container {
width: 80%;
margin: auto;
overflow: hidden
}
header {
background-color: #191919;
position: fixed;
width: 100%;
color: #edf9ff;
min-height: 70px;
border-bottom: #0fe216 3px solid;
display: flex;
align-items: center;
justify-content: space-between;
}
header a {
text-decoration: none;
text-transform: uppercase;
}
header ul {
margin: 0;
}
header li {
list-style-type: none;
float: left;
text-align: center;
padding-right: 20px;
}
nav {
text-align: center;
}
<html>
<head>
<title>Photography | Home </title>
<link href="app.css" rel="stylesheet" />
<script type="application/javascript" src="on.js"></script>
</head>
<body>
<header>
<div id="branding">
<h2>PHOTOGRAPHY</h2>
</div>
<nav id="links">
<ul>
<li>Home</li>
<li>About</li>
<li>PHOTO GALLERY</li>
<li>VIDEO GALLERY</li>
</ul>
</nav>
</header>
<section id="showcase">
<div class="container">
<h2>Photography</h2>
<p>Our photo's are always presente in the best quality possible with carefulness
</p>
</div>
</section>
<section class="boxes">
<div class="container">
<div class="box">asdasdsada
<img src="./images/CameraIcon.png">
<h2>Photography</h2>
<p>Our photographers will always find the perfect photo whether it is a simple click to a full on video</p>
</div>
<div class="box">
<img src="./images/CommunityICON.jpg">
<h2>Guranteed!</h2>
<p>If you are not satisfied with our work you will have an 80% refund</p>
</div>
<div class="box">
<img src="./images/TimeIcon.png">
<h2>Time Managment</h2>
<p>Time management is a crucial step so we are always trying our best to finish up the work quickly, but surely</p>
</div>
</div>
</section>
<footer>
<p>Note that any copyright © is reserved</p>
</footer>
</body>
</html>
I took a course in Codeacademy.com for interactive website and finished it, the website we built was not responsive so i took on myself to take it and try to make it a responsive one.
I am having a problem right now with the images on the slider,they just go out of the div,how can i make them stay there?
links:
HTML
CSS
/* General */
.container {
width: 70%;
}
/* Header */
.header {
background-color: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid #ddd;
font-family: 'Oswald', sans-serif;
font-weight: 300;
font-size: 17px;
padding: 1% 2% 1% 1%;
}
/* Menu */
.header .menu {
float: right;
list-style: none;
margin: 1% 0 1% 0;
}
.menu > li {
display: inline;
padding: 0 3% 0 1.5%;
}
.menu a {
color: #898989;
}
/* Dropdown */
.dropdown-menu {
font-size: 16px;
margin-top: 1%;
min-width: 95px;
}
.dropdown-menu li a {
color: #898989;
padding: 8%;
font-weight: 300;
}
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 20%;
margin-bottom: 0;
}
.slide-copy h2 {
color: #b7b7b7;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 2%;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 5%;
margin-top: 2%;
}
.slide-img {
text-align: right;
max-width: 100%;
display: block;
height: auto;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 2%;
margin-bottom: 5%;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family: "HelveticaNeueMdCn", Helvetica, sans-serif;
font-family: 'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 1.5%;
}
.arrow-prev {
margin-right: 2.8%;
display: inline-block;
vertical-align: top;
margin-top: 0.7%;
}
.arrow-next {
margin-left: 2.5%;
display: inline-block;
vertical-align: top;
margin-top: 0.7%;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 1%;
}
.slider-dots li.active-dot {
color: #363636;
}
/* App links */
.get-app {
list-style: none;
padding-bottom: 1%;
padding-left: 1%;
padding-top: 1%;
}
.get-app li {
float: left;
margin-bottom: 1%;
margin-right: 1%;
margin-left: 1%;
}
.get-app img {
height: 40px;
}
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App</li>
<li>Tutorials</li>
<li>Magazines</li>
<li>Web Tools</li>
<li>Support</li>
<li>Careers</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community</li>
<li>Our Blog</li>
<li>Maps Blog</li>
<li>Eng Blog</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
Thanks a lot
Since you are using bootstrap, you can use class img-responsive in the image tag to make your images responsive.
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png">
</div>
your HTML will be like this:
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp2/css/bootstrap.min.css" rel="stylesheet">
<link href="styles/style.css" rel="stylesheet">
</head>
<body>
<div class="header">
<div class="container">
<a href="#" class="logo-icon">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
</a>
<ul class="menu">
<li>Get the App</li>
<li>Tutorials</li>
<li>Magazines</li>
<li>Web Tools</li>
<li>Support</li>
<li>Careers</li>
<li class="dropdown">
More <b class="caret"></b>
<ul class="dropdown-menu">
<li>Community</li>
<li>Our Blog</li>
<li>Maps Blog</li>
<li>Eng Blog</li>
<li>Advertisers</li>
<li>Publishers</li>
<li>About Us</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="slider">
<div class="slide active-slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Flipboard Is Your Personal Magazine</h1>
<p>It's a single place to discover, collect and share the news you care about. Add your favorite social networks, publications and blogs to stay connected to the topics and people closest to you.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/home.png">
</div>
</div>
</div>
</div>
<div class="slide slide-feature">
<div class="container">
<div class="row">
<div class="col-xs-12">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/cnn.png">
Read Now
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Enjoy Flipboard Magazines</h1>
<h2>on the Web</h2>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines on any topic imaginable. Now magazines created by our readers, from Dali to End Trafficking, can be shared and enjoyed on the Web by anyone, anywhere.</p>
</div>
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/magazines.png">
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container">
<div class="row">
<div class="slide-copy col-xs-5">
<h1>Badges & Widgets</h1>
<p>Millions of people use Flipboard to read and collect the news they care about, curating their favorite stories into their own magazines. Now you can promote the ones you create or think are awesome.</p>
<ul class="get-app">
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ios.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/android.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/windows.png"></li>
<li><img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/blackberry.png"></li>
</ul>
</div>
<div class="slide-img col-xs-7">
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/bw.png">
</div>
</div>
</div>
</div>
</div>
<div class="slider-nav">
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-prev.png">
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul>
<img src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/arrow-next.png">
</div>
<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>
for making any image auto responsive do
img {
max-width: 100%;
display: block;
height: auto;
}
Now image will be display according to its parent width.
thanks
As your using bootstrap, you can use the class ".img-responsive", e.g :
<img class="img-responsive" src="http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/logo.png">
HTML:
<div id="container">
<!-- Header -->
<div id="logo">
<img src="img">
</div>
<div id="header">
<h1>Header</h1>
</div>
<!-- Nav -->
<div id="nav">
<ul>
<li>nav</li>
<li>nav</li>
<li>nav</li>
</ul>
</div>
<!-- Main Content -->
<div id="content">
<div id="mainContent">
Content
</div>
<div id="imgOne">
<img src="img">
</div>
<div id="imgTwo">
<img src="img">
</div>
<div id="imgThree">
<img src="img">
</div>
</div>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
}
#logo {
width: 150px;
height: 200px;
border: 3px solid black;
float: left;
}
#header {
text-align: center;
border: 3px solid black;
}
#nav {
clear: left;
}
#content {
}
How it currently looks.
This is what it looks like right now. I would like the header to not be overlapping and still stay centered in the page, how can I do that?
Sorry if the post is sloppy, first post here & new to coding.
This can be done in so many ways dependent of how everything else on the page should behave.
Below sample just show a way to fix the header issue.
The to the "header" added "margin" and "padding" make sure the header text is center to page and as well not overlap the image.
* {
margin: 0;
padding: 0;
}
#container {
width: 100%;
}
#logo {
width: 150px;
height: 200px;
border: 3px solid black;
float: left;
}
#header {
text-align: center;
border: 3px solid black;
margin-left: 156px;
padding-right: 156px;
}
#nav {
clear: left;
}
#content {
}
<div id="container">
<!-- Header -->
<div id="logo">
<img src="img">
</div>
<div id="header">
<h1>Header</h1>
</div>
<!-- Nav -->
<div id="nav">
<ul>
<li>nav</li>
<li>nav</li>
<li>nav</li>
</ul>
</div>
<!-- Main Content -->
<div id="content">
<div id="mainContent">
Content
</div>
<div id="imgOne">
<img src="img">
</div>
<div id="imgTwo">
<img src="img">
</div>
<div id="imgThree">
<img src="img">
</div>
</div>
</div>
<div id="footer">
Footer
</div>
I'm trying to develop a pretty simple site using twitter bootstrap. When adding content I noticed that all of the content with the container class was being shifted a bit to the left with the addition of a child div of the row class with image content. The padding/margin/width of the container div doesn't seem to be changing so I'm really not sure what's affecting this change.
The HTML and CSS is below and the issue can be seen if you comment out the divs with classes .row1 and .row2. Doing so returns the content of the container class to its regular location.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Header -->
<div id="header">
<div class="container">
<div id="leftHeader">
<h1>Title</h1>
<h1 class="subtitle"><small>Subtitle</small></h1>
</div>
<div id="rightHeader">
<h3>Declaration</h3>
</div>
</div>
</div>
<!-- Navbar -->
<nav class="navbar navbar-default">
<div class="container">
<!-- Navbar Header -->
<div class="navbar-header">
<a class="navbar-brand" href="index.htm">Company Name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li>Services</li>
<li>Pricing</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
<!-- Content -->
<div class="container">
<div class="row row1">
<div class="col-md-12">
<div id="countercont">
<div id="counter"><div>0</div></div><div id="introRest">Counter text</div>
<div id="edge">Other side</div>
</div>
</div>
</div>
<div class="row row2">
<div class="col-md-4 img1">
<img src="computer.jpg" />
</div>
<div class="col-md-4 img2">
<img src="lightbulb.jpg" />
</div>
<div class="col-md-4 img3">
<img src="dome.jpg" />
</div>
</div>
<div class="row row3">
<div class="col-md-6">
<h1>Title</h1>
<p>Text</p>
</div>
<div class="col-md-6">
<h1>Title 2</h1>
<p>Other Text</p>
</div>
</div>
</div>
</body>
</html>
CSS
.subtitle {
margin-top: -15px;
}
#leftHeader {
float: left;
}
#rightHeader {
float: right;
}
#rightHeader h3 {
font-size: 28px;
padding-top: 40px;
}
#counter {
border-style: solid;
border-width: 1px;
width: 150px;
display: block;
margin-left: auto;
margin-right: auto;
}
#counter div {
font-size: 50px;
width: 82px;
margin: 0 auto;
}
#introRest, #edge{
font-size: 30px;
display: none;
}
#edge {
float: right;
font-style: italic;
}
#countercont {
height: 80px;
}
.img1, .img2, .img3 {
text-align: center;
}
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
}
.row2 {
padding-top: 10px;
padding-bottom: 30px;
}
.row3 ul {
padding-left: 20px;
margin-top: 20px;
margin-bottom: 20px;
}
.row3 li {
font-size: 13px;
}
Did you try adding a max-width to your images?
.img1 img, .img2 img, .img3 img {
border: 2px solid black;
height: 240px;
width: 240px;
max-width:100%; /* Added these */
max-height:100%; /* Added these */
}
Example on Bootply