Help I'm stuck


#1

Im trying to have two <ul> li in my html as one for my nav and for footer one for social media links but are both is stuck with li.a in my css and i cant change how i want it to layout for my footer without moving my nav.

`

/* CSS Document */

body

{
margin:0;
padding:0;
font-family:Verdana, Geneva, sans-serif;
background-color: rgb(196,196,196);
color:#CCC;
}

wrapper

{
width:80%;
margin:auto;
position:relative;
background-color:#333;
min-width:521px;
}

header

{
background-color:#666;
height:80px;
margin-top:10px;
}

nav

{
background-color:#666;
display:inline-block;
width:100%;
margin-top:10px;
margin-bottom:10px;
height:
}

navpos

{
width:526px;
position:relative;
margin:auto;
}

@media only screen and (max-width : 640px)
{

ul li 

{ 

display:inline-block;

	}

}

ul

{

list-style-type:none;
padding:5px;
padding:0;
margin-top:8px;
margin-bottom:8px;

}

li

{

display:inline-block;

}

li>a

{

text-decoration:none;
text-align:center;
display:block;
color:#CCC;
width:100px;

}

li>a:hover

{

text-decoration:underline;
color:#F0F;

}


#banner

{

background-color:#666;
display:block;

}

.imageresp

{

width:100%;

}

#content2

{

display:block;
background-color:#666;
margin-top:10px;

}

#one 

{
background-color:#666;
float:left; 
margin-right:2%;
width:49%;

}
	
#two 

{
background-color:#666;
overflow:hidden;
margin-top:10px;
min-height:170px;
width:49%;

}

@media screen and (max-width: 640px) 

{
#one 

{ 

	float:none;
	margin-right:0;
	width:100%;
	border:0;

}

#two 

{ 

	float:none;
	margin-right:0;
	width:100%;
	border:0;

}

}

p

{

font-size:14px;
color:#CCC;
padding-left:15px;
padding-right:15px;
padding-bottom:15px;

}









#footer {
height:150px;
background-color:#666;
display:block;
margin-top:10px;
margin-bottom:10px;
}
#footer li {
display: flex;
justify-content: flex-end;
display:inline-block;

}

#2

you could simply use #footer li to get the list element inside your footer without affecting your nav?


#3

im new to this sorry. i want my social media to be on the right and not alot of spacing but li>a in my css is affecting the footer li too.

footer {

height:150px;
background-color:#666;
display:block;
margin-top:10px;
margin-bottom:10px;
}


#footer li {
display: flex;
justify-content: flex-end;
display:inline-block;

}

#4

if you want help, please provide the full code (html + css) you are working on.

Its the easiest way i can help you

but if you #nav li and #footer li you should be able to manipulate one with affecting the other?


#6

<!DOCTYPE html>	

<head>

	<title>Template for Website</title>

	<meta name="description" content="Free Web tutorials"/>

	<meta name="keywords" content="HTML,CSS,XML,JavaScript"/>

	<link type="text/css" rel="stylesheet" href="css/style.css"/>

</head>	
	
<body>
	<div id="wrapper">

		
		<div id="header">

			<h1> </h1>

		</div>

	<div id="nav">

		<div id="navpos">

			<ul class="nav">
				
				<li> <a href="index.html">Homepage</a> </li>

				<li> <a href="url">How to's</a> </li>	
			
				<li> <a href="url">Service</a> </li>
 			
				<li> <a href="url">Contact us</a> </li>	
			


			</ul>

		</div>


	</div>

	<div id="banner">

		<img class="imageresp" src="carbanner.jpg" alt="carBanner"/>

	</div>

	

	<div id="content">

		<div id="one">

				<p> Add Text here </p>

				<br />
				<br />
				
	
				
				<p> Add Text here </p>
		
				<br /> 
				<br />

				
				<p> Add Text here </p>		
				<br /> 
				<br />
		

		</div>

		<div id="two">	

				<p> Add Text here </p>
		
				<br />
				<br />
	
				
				<p> Add Text here </p>
		
				<br /> 
				<br />

				
				<p> Add Text here </p>
				<br /> 
				<br />
		
		</div>

	</div>

		<div id="footer">
			
			<div>
			
				<h6> Saran khongmek Copyright 2016 </h6>
				
				<ul class="Social">
				 
				
					<li><a class="one" href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/tumblr_alt.png" alt="tumblr" width="35" height="35"/></a></li>	
				
					<li><a class="one" href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/Twitter_bird_logo_2012.svg.png" alt="twitter" width="35" height="35"/></a></li>	
				
					<li><a class="one" href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/facebook.svg" alt="facebook" width="35" height="35"/></a></li>	
				
					<li><a class="one" href="https://nescollegeithelpzone.tumblr.com"><img src="Media_libery/YouTube-icon-full_color.png" alt="youtube" width="35" height="35"/></a></li>	
				
				</ul>
			
			</div>
				
		</div>
	

</div>

</body>

</html>

#7

body

	{
	margin:0;
	padding:0;
	font-family:Verdana, Geneva, sans-serif;
	background-color: rgb(196,196,196);
	color:#CCC;
	}

#wrapper

	{
	width:80%;
	margin:auto;
	position:relative;
	background-color:#333;
	min-width:521px;
	}

#header

	{
	background-color:#666;
	height:80px;
	margin-top:10px;
	}

#nav

	{
	background-color:#666;
	display:inline-block;
	width:100%;
	margin-top:10px;
	margin-bottom:10px;
	height:
	}

#navpos

	{
	width:526px;
	position:relative;
	margin:auto;
	}

	@media only screen and (max-width : 640px)

 	{

	ul li 

	{ 

	display:inline-block;

    	}

	}
	
	ul

	{

	list-style-type:none;
	padding:5px;
	padding:0;
	margin-top:8px;
	margin-bottom:8px;

	}
	
	li

	{

	display:inline-block;

	}
	
	li>a

	{

	text-decoration:none;
	text-align:center;
	display:block;
	color:#CCC;
	width:100px;

	}
	
	li>a:hover

	{

	text-decoration:underline;
	color:#F0F;

	}


	#banner

	{

	background-color:#666;
	display:block;

	}

	.imageresp

	{

	width:100%;

	}

	#content2

	{

	display:block;
	background-color:#666;
	margin-top:10px;

	}

	#one 

	{

 	background-color:#666;
  	float:left; 
  	margin-right:2%;
  	width:49%;

	}
		
	#two 

	{ 

  	background-color:#666;
  	overflow:hidden;
  	margin-top:10px;
  	min-height:170px;
	width:49%;

	}

	@media screen and (max-width: 640px) 

	{

   	#one 

	{ 

    	float:none;
    	margin-right:0;
    	width:100%;
    	border:0;
   
  	}
	
	#two 

	{ 

    	float:none;
    	margin-right:0;
    	width:100%;
    	border:0;

   
  	}

	}

	p

	{

	font-size:14px;
	color:#CCC;
	padding-left:15px;
	padding-right:15px;
	padding-bottom:15px;

	}

	

	



	
	
	#footer {
	height:150px;
	background-color:#666;
	display:block;
	margin-top:10px;
	margin-bottom:10px;
	}

	
  	#footer li {
  	display: flex;
  	justify-content: flex-end;
	display:inline-block;
	
	}

#8

i put your code in a bin, #footer li a and #nav li a, if i use the correct css selectors, i can manipulate the footer without screwing up the nav

i don't see a problem, please explain what the problem is?


#9

It's for some reason, i don't know how to move to the right side and make them smaller but like close together without spacing in between for the footer li in css

if you know what i mean


#10

you can simply use float: right? like i did here


#11

it have the massive spacing in between them.
do you know how to fix that?


#12

you coded this:

li>a

	{

	text-decoration:none;
	text-align:center;
	display:block;
	color:#CCC;
	width:100px;

	}

you made the anchor elements (a) a block with a 100px width.


#13

i changed it to 50px then it my nav gets messy.

is it possibly to change it. so it doesn't mess up my nav li like this?


#14

well, li>a will affect. Both this mean you will need to split the css selector into #nav li>a and #footer li>a


#15

Thank you. i can now continue with my website and sorry for your time.


#16

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.