Here's the site I'm working on:
http://artificialmarketingsolutions.com/
I'd like to move the nav menu over to the left, so it lines up with the content. But when I change the margins, it squishes the menu all onto the same word.
Any tips? Thanks!
On line 317 of your style.css, under the #nav ul declaration,
change padding: 0 0 0 10px; to padding: 0.
Does it solve your problem?
Related
I don't know how to really explain this but how can I center align this logo
http://jsfiddle.net/fa7w3h99/3/
I have tried the following but it didnt seem to work as intended.
.center-logo {
display: block;
margin: auto;
}
You will have to change the width, height, and viewbox attributes of your svg.
Here I'd say it should be :
width="135px" height="135px" viewBox="0 0 135 135"
jsfiddle
I was able to change my homepage so that the images now stretch full width on the screen. Now I just need to fix the text and content so that it has a max-width of 960px. Below is an image of what I am trying to fix.
If I can get the "Mobile Job Search" section/text back to how the rest of the pages are on the website that would be perfect.
The two divs are .myLeftColumn2 and .myrightColumn2
Any help would be great. Thanks so much!
www.jobspark.ca
Just add that CSS to your code, I hope that work for other pages too...
CSS
#content{
max-width: 960px;
margin: 0 auto;
}
Put the whole text inside a new div, then write:
#newdiv{
max-width: 960px;
}
Into your style sheet. This should work perfectly!
You are probably going to have to enclose the content below the image in its own div, and restrict it's width.
Edit I looked at the source html, but it is quite messy.
Just to see if this changes anything, located all the divs like this:
<div class="row sqs-row" id="yui_3_7_3_1_1369586030814_180">
Here's the css :
.sqs-row { width: auto !important; *zoom: 1; }
edit that width to the width you want (960px)
.sqs-row { width: 960px; *zoom: 1; }
Is there any way to achieve this in CSS3?:
height: 100% -110px;
My context:
You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:
body {
height; 100%;
padding: 0 0 20px;
}
div#wrap {
background: #fff;
height: 100%;
padding: 0 0 20px;
margin: 0 0 -20px;
}
div#wrap div { //this would be your actual element
height: 100%;
background: pink;
}
What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.
As for your example, maybe sticky footer will be some inspiration for you.
Edit
Nowadays it's well supported by major browsers:
http://caniuse.com/calc
Directly like that i'm not aware of any feature widely adopted to do that.
But there is a easy method to achieve the effect.
Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.
You can also subscribe the 'window.onResize' event to recalculate when the window is resized.
I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.
In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.
In other words height = vertical end - vertical start:
#div2 {
position:absolute;
top:90px;/*20+50+20*/
bottom:20px;
}
http://jsfiddle.net/cGwrw/3/
I'm working on a resizable page with a sidemenu to the right, and it almost works as supposed on this simple example:
http://pastehtml.com/view/1do8cy9.html
The problem though is that position auto and min-width dont react as expected. If you drag the browserwindow smaller than 500px (as the min-width is set to), the red sidemenu continues over the green content..
How do I make the sidebar stop when it reaches the min-width, fx 500px?
The absolute positioned div should be inside the min width div which should have position relative
Edit, better explanation:
For the sidebar: add top: 0 to the red sidebar and place it inside the min-width container.
For the container: replace the margin-right property with padding-right and add position:relative
I have a fix !
It's weird though:
body{
position:absolute;
top:0;
left:0;
bottom:0;
min-width:1300px;
width:100%;
overflow:auto;
padding:0;
margin:0;
}
I want to check the layout of the page. Something pretty simple - that a certain div is displayed above/below/left/right of another div
Is it possible to do this kind of stuff?
Using the Ruby client (#selenium is my SeleniumDriver object):
To check if a certain element is above another div:
#selenium.get_element_position_top("firstdiv") <
#selenium.get_element_position_top("seconddiv")
To check if a certain element is left to another div:
#selenium.get_element_position_left("firstdiv") <
#selenium.get_element_position_left("seconddiv")
If you also want to check that the elements don't overlap, compare the top of the element to the bottom of the other:
#selenium.get_element_position_top("firstdiv") +
#selenium.get_element_height("firstdiv") <
#selenium.get_element_position_top("seconddiv")
You can do it with Galen Framework. It is a tool based on Selenium but with its own special language.
The idea is that you test locations of page elements relatively to each other. Here is a basic example of how the test code looks like.
# all
------------------------------------
header, menu, footer
width: 100% of screen/width
header
height: 100px
above: menu 0px
menu
height: 50px
above: content 0px
footer
height: > 100px
content
inside: screen 0px left
# desktop, tablet
-----------------------------------
side-panel
width: 300px
below: menu 0px
inside: screen 0px right
near: content 10px right
# mobile
-----------------------------------
side-panel, content
width: 100% of screen/width
side-panel
below: content 5px
For more information you can read this article TDD for Responsive Design