I know this is amateur stuff but I've been trying and trying to get this right and i can't seem to get a fix.
Please take a look at the website screenshot. I'm attempting to make the "call..." text to be inline and to the right of the best#flooring logo.
Here's the code HTML:
<div class="level0">
<div class="topbar">
<h1><% title_content %></h1> <div class="facebookbutton"></div>
<div class="phonetop">Customer services: <strong>0844 209 1560</strong></div>
</div>
</div>
<div class="header">
<div class="level0">
<div class="logonumber">
<img src="<% secure_url %>images/logo.png?r=1" alt="<% title_content %>" />
<div class="headernumber">
<h2>Call <br /> 01132 186 212 <br />for the best prices</h2></div>
</div>
<div class="headfloat">This contains all of the content located on the right hand side </div>
CSS
.level0{
width:970px;
margin:0px auto;
clear:both;
}
.topbar{
height:41px;
color:#747474;
/*text-shadow: 1px 1px 2px #000;*/
}
.header{
background:#fff;
height:166px;/*was 126*/
}
.logonumber {
float:left;
display:inline-block;
}
.logo{
display:block;
}
.headernumber{}
contains the nav, the card images, basket and search.
Any help would be much appreciated.
You need
.headernumber {
float: left;
}
and you also need to decrease the size of the .headfloat element because its width does not allow all three elements in the same line
so change the .headfloat rule to
.headfloat {
float: right;
padding-top: 13px;
text-align: right;
width: 350px; /*was 460px*/
}
Related
I have 2 questions (more like 1.5)
1) What would be the correct way to modify the menu in the first picture to look like the one in the second. Since I put both the picture and the text in the same <a> tag I'm having problems with the white border (the icons are 30x30px, no transparent space around them or anything) :
HTML:
<div id="header">
<div class= "main">
<div class="logoHeader">
<img src="logo.png">
</div>
<div class="menuPicHeader">
<img src="stovyklae.png"><h2>stovykla</h2>
<img src="klubase.png"><h2>klubas</h2>
<img src="elparde.png"><h2>el. parduotuvė</h2>
<img src="kontaktaie.png"><h2>kontaktai</h2>
</div>
<div class="socialIconsWrapHeader">
<img src="yttop.png">
<img src="ftop.png">
</div>
</div>
</div>
CSS:
h2{
display:inline-block;
text-transform: uppercase;
text-decoration: none;
color: black;
margin-left:10px;
margin-right:10px;
font-size:14px;
}
.logoHeader{
margin-left:15px;
float:left;
margin-bottom: 20px;
margin-top:15px;
}
.socialIconsWrapHeader{
float:right;
margin-top:15px;
margin-right:20px;
}
.socialIconsWrapHeader a{
margin:0px 10px 0px 10px;
}
.menuPicHeader{
float:left;
margin:20px 0px 0px 130px;
padding-left:10px;
}
.menuPicHeader a{
padding-top:20px;
padding-bottom:2px;
}
2) I was wondering what should I use to get the text onto the picture as seen here:
Should I cut the picture in a half, get some div and stick it to the bottom of the picture using the grey half as background? Or somehow just write on top of the <a>?
HTML:
<div class="rightCol1">
<img src="pic1.png">
<img src="pic2.png">
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
1: add .menuPicHeader a{ margin-right: 20px; }
http://jsfiddle.net/Lphup/
2: There are a lot of ways to do that, but here's one option:
http://jsfiddle.net/33vth/
for second
<div class="rightCol1">
<img src="pic1.png"><span>your text</span>
<img src="pic2.png"><span>your text</span>
</div>
CSS:
.rightCol1{
float:right;
margin-right:30px;
margin-top:10px;
}
.rightCol1 a {display:inline-block;position:relative;height:200px;width:100px;}
.rightCol1 a span {display:block;width:100px;height:70px;position:absolute;bottom:0;left:0;z-index:99;background:#333}
You can have more positioning control over the elements if you set their parent's positioning to 'relative' and then set their positioning to absolute. This lets you use top, left or right to set an absolute position for the child objects, in relation to their parent.
I didn't have a chance to try this, but something like this should do the trick:
.menuPicHeader { position: relative; }
.menuPicHeader a { position: absolute; top: 0; }
Working on a website where I am thinking to make the name as a variable to show who is logged in but the problem is that the log out buttom goes out of the header when the name is short as Petter, but stays inside when the name is long as Petter Hansen. Is it a solution to make the buttom stay at same position independent of the name size?
jsfiddle: http://jsfiddle.net/85tU2/
Try this: http://jsfiddle.net/85tU2/2/
I've tidied up a few things - basically, moved the divs around because you are using float:right. Your code was using margins to move the button to the right of the name. So in the css, I've done this:
#formtekst {
position:relative;
float: right;
margin: 1px 0px 0px 0px;
background:#ccc;
}
#form-group {
position:relative;
float:right;
margin:15px 0px 0px 0px;
background:#ddd;
}
And for the html:
<div id="logo">
<img id="logo" src="NIH.gif" alt="logo" />
</div>
<div id="form-group">
<button type="button" class="btn">Logg ut</button>
</div>
<div id="formtekst">
<p>Logged in as Petter</p>
</div>
Hey ,
you can just easily change the styles for the #formtkst to this
#formtekst {
float: right;
margin: 1px 15% 0px 0px;}
I want to create a photo gallery for one of my projets but I can't achieve it. What I want is something like that :
I don't know how many photo there will be but basically what it does is:
- Insert first photo in photo_div #1
- Insert 2nd in #2
- Goes to new line
- Insert 3rd in #3
- Insert 4th in #4
- Go to next column and first line
- Insert 5th in #5
- etc.
What I've made so far is the following code :
<div id="scroll_container">
<div id="photo_0" class="div_photo">
<!-- More content inside -->
</div>
</div>
And the CSS code :
scroll_container{
height:100%;
width:550px;
overflow-x:scroll;
overflow-y:hidden;
}
.div_photo{
float:left;
width:250px;
height:250px;
border:1px solid black;
margin:0 5px 5px 0;
position:relative;
display:inline-block;
}
But all I can achieve is a two columns gallery with 3 lines.
Could you help me to solve that ?
Thanks
Looks like your images are always of the same size, and that your problem is just the special order that you want.
In that case, this could be a solution:
.test {
width: 40px;
height: 40px;
border: solid 1px blue;
float: left;
margin: 2px;
}
.test:nth-child(4n+3)
{
border-color: red;
position: relative;
top: 44px;
left: -92px;
margin-right: -44px;
}
.test:nth-child(4n+4)
{
border-color: red;
position: relative;
top: 44px;
left: -46px;
margin-right: -44px;
}
fiddle
The idea is to float the first 2 elements, the 5 and 6, and so on. the 3rd and 4th (and 7th and 8th) are positioned relative to take them to the special positions
CSS
.div_photo{
float:left;
width:250px;
height:250px;
border:1px solid black;
margin:0 5px 5px 0;
position:relative;
display:inline-block;
}
.div_photo_1{
float:left;
width:250px;
height:250px;
border:1px solid black;
margin:0 5px 5px 0;
position:relative;
display:inline-block;
}
#scroll_container_1 {
height:auto;
width:257px;
display:inline-block;
}
#scroll_container {
height:auto;
width:514px;
}
#scroll_container_parent {
height:auto;
width:771px;
overflow-x:scroll;
overflow-y:hidden;
}
HTML
<div id="scroll_container_parent">
<div id="scroll_container">
<div id="photo_1" class="div_photo">1</div>
<div id="photo_2" class="div_photo">2</div>
<div id="photo_3" class="div_photo">3</div>
<div id="photo_4" class="div_photo">4</div>
<div id="photo_6" class="div_photo">6</div>
<div id="photo_7" class="div_photo">7</div>
<div id="photo_9" class="div_photo">9</div>
<div id="photo_10" class="div_photo">10</div>
</div>
<div id="scroll_container_1">
<div id="photo_5" class="div_photo_1">5</div>
<div id="photo_8" class="div_photo_1">8</div>
<div id="photo_11" class="div_photo_1">11</div>
</div>
</div>
Modified HTML...may be this should be good
This way you can write your html:
<div id="scroll_container">
<div id="photo_1" class="div_photo">
<!-- More content inside -->1
</div>
<div id="photo_2" class="div_photo">
<!-- More content inside -->2
</div> <div id="photo_3" class="div_photo">
<!-- More content inside -->3
</div> <div id="photo_4" class="div_photo">
<!-- More content inside -->4
</div> <div id="photo_5" class="div_photo">
<!-- More content inside -->5
</div>
</div>
For the 5th one you can apply additional css with id as :
#photo_5 {
display:inline-block;
margin-left:520px;
margin-top:-510px;
}
As you don't want to use table then you can achieve this with css.
Working Fiddle : jsFiddle Working Demo
Having problems displaying two images and one h1 tag on the same line. I want to align one image to the left and the last two elements on the right. Any tips on how to do that?
HTML
<div class="header">
<img src="meny_knapp2.png" class="meny" alt="meny link">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo">
<h1 class="lsb"> Læringssenteret </h1>
</div>
CSS
.header {
height:120px;
width:100%;
background-color:#ff7f1f;
color:white;
font-size:20px;
display: table;
vertical-align:middle;
}
.meny {
height: 25px;
margin-left:0.5em;
line-height:120px;
}
.lsb {
font-size:24px;
letter-spacing:0.09em;
font-weight:lighter;
display:inline;
}
.hioa {
height: 60px;
float:right;
margin-right:1em;
}
.header * {
float: right;
}
.header img:first-child {
float: left;
}
.hioa {
height: 60px;
margin-right:1em;
}
please adjust css in class
<div class="header">
<div style="float:left;width:30%">
<img src="meny_knapp2.png" class="meny" alt="meny link" width="50"/>
</div>
<div style="float:right;width:70%">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo" style="float:left;width:100px"/>
<h1 class="lsb" style="float:left;width:50%"> Læringssenteret </h1>
</div>
</div>
I'm trying to format math equations vertically using CSS. For example 5,343 + 32 should be formatted as so:
Line 1: 5,343 (right aligned)
Line 2: + (left aligned) 32 (right aligned) --- Note that the plus sign and bottom number are on the same line.
Line 3: ------ (horizontal line)
I've been fooling around with this for the last hour and have had very little luck.
I laid by HTML out like this:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="sign">+</p>
<p class="lowerNum">32</p>
<p class="line"><hr></p>
</div>
A semantic approach
Here's a semantic approach to marking up an equation that, from the same markup, can be rendered horizontally or vertically by adding a single class. These equations are made up of numbers, an operator, and an equals sign. Here's the markup for an equation:
<span class="equation">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
That alone renders horizontally:
5,343
+
32
=
5,375
With a little CSS, we quickly can transform into a stacked layout. We just add a single stacked class to the equation element:
<span class="equation stacked">
<span class="number">5,343</span>
<span class="operator">+</span>
<span class="number">32</span>
<span class="equals">=</span>
<span class="number">5,375</span>
</span>
The following CSS does the magic:
.equation.stacked {
display: inline-block;
}
.equation.stacked .number {
display: block;
margin-left: 1em; /* space for the operator */
text-align: right;
}
.equation.stacked .operator {
float: left;
}
.equation.stacked .equals {
display: block;
height: 0;
border-bottom: solid 1px black;
overflow: hidden;
}
This renders like this:
Here's a JSBin you can explore: http://jsbin.com/afemaf/1/edit
Do you mean something like this?: http://jsfiddle.net/PkfAU/2/
What you would be doing is using divs, because they are better for creating layouts. Paragraphs are also valid, as the other answer points out, but I find it easier to see with divs. In this case you will need a container div, and three horizontal ones, the second of them being also a container.
.plus and .number are floating inside its container .second, because you need them to use the same horizontal space (all floating elements require a wrapper).
HTML:
<div class="container">
<div class="first">5,343 </div>
<div class="second">
<div class="plus">+</div>
<div class="number">32</div>
</div>
<div class="third">
<div class="result">5,375</div>
</div>
</div>
CSS:
.container {
width:200px;
}
.first,
.second {
width:200px;
text-align:right;
display:table;
}
.plus {
width:auto;
float:left;
}
.number {
width:auto;
float:right;
}
.third {
width:200px;
text-align:right;
border-top:1px solid black;
}
I think this may be your best bet:
HTML:
<div id="textbox">
<p class="upperNum">5,343</p>
<p class="lowerNum">
<span class="operand">32</span>
<span class="sign">+</span>
</p>
<br class="clear" />
<p class="line"><hr></p>
</div>
CSS:
#textbox { width: 75px; }
.upperNum { text-align: right; }
.operand { float: right; }
.sign { float: left; }
.clear { clear: both; }
Here's a fiddle that shows this effect also:
http://jsfiddle.net/8CPar/
Here, you can contain the bottom line in a paragraph, then give the operator and operand a separate span container that you can float, giving you the desired effect. Then, you add a "clear break" which clears the float, making the horizontal break show correctly.
I hope this helps!
There are some fine examples here, but I went through with the effort of making a fiddle so might aswell post it.
You just need to ensure that widths and alignments are set correctly and it should work out.
My JSFiddle Example.
<div id="list">
<span class="item">5472</span>
<span class="operator">+</span><span class="item operand">32</span>
<hr class="divider"/>
<span class="result">5504</span>
</div>
With css
.list
{
width:50px;
}
span
{
display:block;
margin-left:20px;
font-family:"Lucida Console", Monaco, monospace;
width:50px;
}
.operator
{
float:left;
width:20px;
margin-left:0px;
}
.divider
{
clear:both;
width:40px;
margin-left:20px;
}
.operand
{
float:left;
width:50px;
}
I also created an example using pre, that uses pre formatted text, so it should still be precise.
Classics,
<html>
<head>
<style type="text/css">
.textbox
{
width: 100px;
}
.upperNum
{
text-align: right;
width: 100%;
}
.sign
{
float: left;
text-align: left;
}
.lowerNum
{
text-align: right;
}
.secondline
{
clear: both;
width: 100%;
}
</style>
</head>
<body>
<div class="textbox">
<div class="upperNum">
5,343
</div>
<div class="secondline">
<div class="sign">
+
</div>
<div class="lowerNum">
32
</div>
</div>
<div>
<hr />
</div>
</div>
</body>
</html>