I've tried several things for the project divs..
Ideally i would like them to align in a neat block 3*2 or similar.
div {
text-align: top;
}
#container {
background: #;
width: 960px;
margin-left: auto;
margin-right: auto;
}
#header {
width: 950px;
background: #rgb(187, 203, 231);
align-content: center;
}
/* here I am using type selectors to link it to my HTML document*/
/*A HTML element can only have one ID and a web page can only have one HTML
element with the same ID*/
/*The following is called a box model, which makes reference to putting a
'box' around a HTML element */
#A {
width: 920px;
height: 180px;
padding: 5px;
margin: 5px;
align-content: center;
f
}
/*padding creates whitespace around content within margins and borders*/
#B {
width: 490px;
height: 500px;
padding: 5px;
margin: 5px;
float: right;
}
#C {
width: 410px;
height: 725px;
padding: 5px;
margin: 5px;
}
}
#main {
width: 940px;
background: #E80CC7;
align-content: center;
f
}
/* Flexbox used for project items within the projectandsamplecode container
which is also a "section"*/
#projectsandexamplecode
/*projects are indiviual boxes*/
#projects {
display: grid;
grid-gap: 50px 100px;
background-image: url("../Images/a.jpeg");
}
/* insert flex row*/
#D {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#E {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#F {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#G {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#H {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#I {
width: 247px;
height: 138px;
border-radius: 5px;
padding: 5px;
}
#socialmedia {
justify-content: left;
background: #40FF40;
width: 200px;
height: 100px;
}
#l {
float: left;
background: #40FF40;
}
#m {
float: left;
background: #40FF40;
}
#n {
float: left;
background: #40FF40;
}
#o {
float: left;
background: #40FF40;
}
#p {
float: left;
background: #40FF40;
}
#footer {
background: #A005FF;
}
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<body>
<!-- this is my div section in a comment web html of basic a,b,c structure to box elements-->
<div id="container">
<div id="header">
<div id="A"> <img id="headerpic" src="images/download.jpeg" ; width: "940"; height: "150"x;></div>
<div id="B"><img src="images/computopia.jpg" width="280" ; height="400"></div>
<div id="C">Site description History and background"
<p><cite>"Bad programmers worry about the code. Good programmers worry about data structures and their relationships"-Linus Trovalds</cite></p>
</div>
<a href="page2.html" CV</a>
</div>
<div id="Projects and example code">
<div id="projects">
<div id="D">
<Project 1>Project 1</div>
<div id="E">
<Project 2>Project 2</div>
<div id="F">
<Project 3>Project 3</div>
<div id="G">
<Project 4>Project4</div>
<div id="H">
<Project 5>Project 5</div>
<div id="H">
<Project 6>Project 6</div>
</div>
</div>
<div=id="socialmedia" social media>
<div id="l">Facbook</div>
<div id="m"><a href="https://www.linkedin.com/in/chris-hudson-23a37118/"> Linkedin</div>
<div id="n">Stackoverflow</div>
<div id="o">GIT-Hub</div>
<div id="p"><a href = secondwebpage.html></a>CV</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Related
Okay so the desired outcome of this is to have the images on the left and the text sit to the right of the images, screenshot below:
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.contact_bar_text {
width: 100%;
}
.contact_bar_call {
background-image: url(/images/call.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
float: left;
margin-right: 100px;
}
.contact_bar_email {
background-image: url(/images/email.png);
height: 32px;
width: 32px;
float: left;
margin-top: 8px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_call">
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_email">
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I want the image to be left of the text and automatically understand when the first line of text (phone number) is finished it will then have the email image with a 5px margin and then the email image and address.
Here a solution using img html tag instead of background-image. I edited a bit your html code.
So you just have use a <img src="###" />tag instead of the <div class="contact_image"></div>
.contact_bar {
width: 100%;
height: 50px;
background: #2c3e50;
color: #ffffff;
border-bottom: solid 2px #c9c9c9;
}
.contact_bar_container {
width: 1050px;
height: 50px;
position: relative;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
}
.contact_bar_content{
display: flex;
align-items: center;
padding: 0 15px;
}
.contact_image{
height: 15px;
width: 15px;
background-color: red;
margin-right: 5px;
}
<div class="contact_bar">
<div class="contact_bar_container">
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Call here
</div>
</div>
<div class="contact_bar_content">
<div class="contact_image">
</div>
<div class="contact_bar_text">
Email here
</div>
</div>
</div>
</div>
I don't think the title is a good one but I don't know how to say it in a better way.
I have 3 divs representing an image, user info, user experience.
Due to mobile responsiveness experience must come last, but with the code below the experience div doesn't touch the top.
.one{
width: 40%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two{
width: 40%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="one">1 image</div>
<div class="two">2 info</div>
<div class="three">3 experience</div>
</div>
How it should look like:
You can wrap the left hand side in a separate div and float that left.
.left {
float: left;
width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
width: 58%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
An alternative approach using flexbox:
.left {
min-width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
flex: 1;
height: 100px;
padding: 5px;
background-color: #f00;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
display: flex;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
Your 1st div(image) has a margin to the right so 3rd div(experience) won't fit in. So at first you have to wrap the 1st two div's into a container like the example below
<div class="four">
<div class = "container">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
After that you will need to inline the container and set the width of container to 40% and first two div's to 100% like the CSS below.
.one{
width: 100%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.container {
display:inline-block;
width:40%;
}
.two{
width: 100%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
vertical-align: text-top;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
Here's it on Codepen and Jsfiddle
Wrap div's one and two in a div that sets the width and floats left, then float div three to the right.
Make div class one and two to 100% width so they fill the left div completely, and set the left div to the width you wanted.
HTML:
<div class="four">
<div class="left">
<div class="one">
1 image
</div>
<div class="two">
2 info
</div>
</div>
<div class="three">
3 experience
</div>
</div>
CSS:
.one{
height: 50px;
padding: 5px;
background-color: #0f0;
display: block;
}
.two{
height: 70px;
padding: 5px;
background-color: #0ff;
display: block;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
display: inline-block;
}
.left {
float: left;
display: block;
width: 42%;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
display: block;
float: left;
}
I have a three column layout. My center div is my main content area. I would like that when my content is not wide this div stretches to fill the available space horizontally and while not critical it would be nice to have it stretch vertically also. I used an online layout generator to create this style. See the attached image
Any help would be apreciated.
<!DOCTYPE html>
<html>
<head>
<title>CSS Portal - Layout</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<STYLE>
/* Generated by http://www.cssportal.com */
#import url("reset.css");
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
color:#333
}
p {
padding: 10px;
}
#wrapper {
width: 100%;
min-width: 600px;
max-width: 1000px;
margin: 0 auto;
}
#headerwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#header {
height: 75px;
background: #FF6633;
border-radius: 10px;
border: 1px solid #eb521f;
margin: 5px;
}
#navigationwrap {
width: 100%;
float: left;
margin: 0 auto;
}
#navigation {
height: 40px;
background: #FFCC33;
border-radius: 10px;
border: 1px solid #ebb81f;
margin: 5px;
}
#contentliquid {
float: left;
width: 100%;
}
#contentwrap {
margin-left: 150px;
margin-right: 150px;
float: left;
}
#content {
background: #FF724F;
border-radius: 10px;
border: 1px solid #eb5e3b;
margin: 5px;
}
#leftcolumnwrap {
width: 150px;
margin-left:-100%;
float: left;
}
#leftcolumn {
background: #33CCFF;
border-radius: 10px;
border: 1px solid #1fb8eb;
margin: 5px;
}
#rightcolumnwrap {
width: 150px;
margin-left: -150px;
float: left;
}
#rightcolumn {
background: #CC33FF;
border-radius: 10px;
border: 1px solid #b81feb;
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
}
#footer {
height: 40px;
background: #33FF66;
border-radius: 10px;
border: 1px solid #1feb52;
margin: 5px;
}
</STYLE>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<?PHP include 'header_page.php'; ?>
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
</div>
</div>
<div id="contentliquid"><div id="contentwrap">
<div id="content">
<?PHP include 'main.php'; ?>
</div>
</div></div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
<?PHP include 'left.php'; ?>
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
<?PHP include 'right.php'; ?>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<?PHP include 'footer.php'; ?>
</div>
</div>
</div>
</body>
</html>
you can use flex layout to solve it, here you can find an example .
I'm having this HTML/CSS code:
.container
{
max-width: 900px;
margin: 0 auto;
margin-top: 30px;
}
.divisions
{
border: 1px solid Black;
}
.Fisrt-Line
{
height: 180px;
}
.First
{
background-color: Green;
width: 32.2%;
}
.Second
{
width: 65%;
background-color: White;
margin-left: 20px;
}
.Second-Line
{
margin-top: 20px;
background-color: Blue;
float: left;
width: 100%;
height: 180px;
}
.Third-Line
{
height: 180px;
width: 31.6%;
float: left;
margin-top: 20px;
}
.Third-2
{
margin-left: 20px;
background-color: Red;
}
.Third-3
{
margin-left: 20px;
}
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link href="Styles/StyleSheet.css" rel="stylesheet" />
</head>
<body class="container">
<div class=" divisions Fisrt-Line First">
1</div>
<div class=" divisions Fisrt-Line Second">
2</div>
<div class="divisions Second-Line">
3
</div>
<div class="divisions Third-Line">
4
</div>
<div class="divisions Third-Line Third-2">
5
</div>
<div class="divisions Third-Line Third-3">
6
</div>
</body>
</html>
When I minimize the browser the second div and also the last div jump to next line. but I don't want that.
How should I edit the code so that those divisions just become smaller not jump to next line?
Do you mind to add additional wrappers for rows? if not please take a look here http://jsfiddle.net/ch0L9fy8/2/
Main update here beside row wrappers:
.divisions-line {
width: 100%;
}
.divisions {
box-sizing: border-box;
border: 1px solid Black;
}
I created a link to an ID that should send the user to a div located somewhere at the top of the same page.
when clicking this link, it does jump to the #id, but everything inside the containing div of that id, gets truncated.
EDIT:
Ok, here's a fiddle
CSS:
#header {
width: 1080px;
min-height: 80px;
position: relative;
background-color: #badaf6;
margin-left: auto;
margin-right: auto;
}#container {
width: 1080px;
min-height: 700px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0;
border-bottom: 0;
overflow: hidden;
background-color: #FDFDFD;
}
#left {
float: left;
width: 700px;
min-height: 700px;
background-color: #fff;
}
#marg {
margin: 11px 20px 10px 18px;
}
#right {
float: left;
width: 380px;
min-height: 700px;
background-color: #fff;
}
#left #box {
margin-top: 0;
margin-left: 0;
background-color: #ECF4FD;
width: 500px;
height: 200px;
}
#left, #middle, #right {
padding-bottom: 999999px;
margin-bottom: -999999px;
}
#space {
margin: 30px 0 40px 4px;
}
HTML:
<body>
<div id="header">
</div>
<div id="container">
<div id="left">
<div id="space">
<div id="box">
</div>
<p><a href="#box">Click</p>
</div>
</div>
<div id="right">
</div>
<br style="clear: left;" />
</div>
</body>
If its okay, you can change your html like this http://jsfiddle.net/xx6jgLsj/1/
<p><a href="#left">Click</p>