Solved

CSS Problem

Posted on 2013-02-07
17
207 Views
Last Modified: 2013-02-07
I have a web design and am having trouble getting a couple things to go all the way across.

The item in question is the nav class. I am stumped. Please help.
index-plain.php
core2.css
0
Comment
Question by:katlees
  • 9
  • 8
17 Comments
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866414
can you post your site or the images for the nav and logo so I can see it all.
0
 

Author Comment

by:katlees
ID: 38866533
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866550
I don't see any nav at all?
0
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

Author Comment

by:katlees
ID: 38866554
I took it out to get the issue with the red bar correct.
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866556
maybe I'm not understanding your problem?
0
 

Author Comment

by:katlees
ID: 38866557
http://www.northamericantribal.com/TeST/

is the one with the nav and content in it
0
 

Author Comment

by:katlees
ID: 38866558
The red nav line needs to go all the way across. If I pull it up on an IPAD or a small screen size, it stops at 930 px
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866576
try this:

<div class="nav-main" style="width:100%;">

Open in new window


I see your problem with my phone, on the browser it's fine.
0
 

Author Comment

by:katlees
ID: 38866582
Not working on my ipad
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866585
or try adding this in css:

{
  width: 100%;
  margin: 0px;
}

Open in new window


or

margin-right:-10px;
margin-left:-10px;

Open in new window

0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866588
0
 

Author Comment

by:katlees
ID: 38866589
my nav-main looks like this in CSS now

.nav-main{

 background-image:url(../site_images/nav-bckgrnd.png);
background-position:top center;
background-repeat:repeat-x;
width:100%;
height:73px;
position:relative;
z-index:2;
margin-right:-10px;
margin-left:-10px;

}
0
 

Author Comment

by:katlees
ID: 38866592
Still not working..
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866594
here, this works:

apply min-width:1024px, or even just min-width:1000px
0
 

Author Comment

by:katlees
ID: 38866598
I have this and it isn't working..

.nav-main{
 background-image:url(../site_images/nav-bckgrnd.png);
background-position:top center;
background-repeat:repeat-x;
height:73px;
position:relative;
z-index:2;
min-width:1024px;

}
0
 
LVL 6

Expert Comment

by:nickinthooz
ID: 38866599
this also:

<meta name="viewport" content="width=1003, initial-scale=1, maximum-scale=1">

Open in new window


goes in the header
0
 
LVL 6

Accepted Solution

by:
nickinthooz earned 500 total points
ID: 38866606
I'm sorry, apply the min-width to your <body> tag

<body style="min-width: 1024px;">

Open in new window

0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Google Page Speed Insight with srcset 4 87
How to combine and minify CSS and JS files 5 17
Filktering Alphabetically 8 29
2 separate CSS animations 2 16
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question